анимация повтора jquery

#jquery

Вопрос:

Этот код, похоже, нарушает оставшуюся часть моего кода?

 function sam() {
    $("#animate").children("#box")
        .animate({
        left: ' =1100'},8000, 'linear', function() {
            $("#animate").children("#box").css("left", "0");
            sam();
        });
}

setInterval(sam());

Извините за короткий ответ, но я продолжал блокироваться из-за глупого сообщения о качестве

Ответ №1:

Попробуйте изменить

 setInterval(sam());

Для

 setInterval(function(){
    sam()
}, 1000);

которая будет запускать sam() каждую секунду.Ваше использование setInterval неверно

Кроме того, удалите sam() вызов sam() функции.

Итак, окончательный код:

 function sam() {
    $("#animate").children("#box")
        .animate({
        left: ' =1100'},8000, 'linear', function() {
            $("#animate").children("#box").css("left", "0");
        });
}

setInterval(function(){
    sam()
}, 1000);

Ответ №2:

setInterval нужен второй параметр для того, как часто вы собираетесь запускать код sam() . но я не знаю, хотите ли вы этого, похоже, это все равно делается.

 function sam() {
    $("#animate").children("#box")
        .animate({
            left: ' =1100'},8000, 'linear', function() {
            $("#animate").children("#box").css("left", "0");
            sam();
        });
}

sam();

должно быть достаточно, если вы хотите повторять анимацию снова и снова или использовать setTimeout вместо setInterval.

Установленный интервал перезапустит код, даже если первый запуск не завершен, ваша анимация занимает 8 секунд, например, если вы скажете запускать sam () каждые 2 секунды, вы получите очень, очень плохой результат, потому что выполнение кодов занимает более 2 секунд, и вы также сказали, что его следует перезапуститьсам по себе. Я бы setInterval вообще не использовал.

Демонстрация: http://jsfiddle.net/voigtan/tG7Gm/2 /

Ответ №3:

Вы можете использовать обратный вызов finished-animation для запуска новой анимации. Не могли бы вы уточнить, хотите ли вы, чтобы анимация начиналась после завершения первой, или просто иметь бесконечные анимации друг над другом?

1. Я хочу, чтобы анимация постоянно повторялась

2. Что такое завершенный обратный вызов анимации?

3. Извините, это заняло так много времени. Читайте здесь: api.jquery.com/animate 2-й пример в разделе «Базовое использование».

Ответ №4:

Удалите () то, откуда вы передаете sam в качестве обратного вызова. Вы хотите передать функцию, а не ее результат.

 var sam = function() { // Changed this to show functions are variables
    $("#animate").children("#box")
        .animate({
        left: ' =1100'},8000, 'linear', function() { // Not sure about  =
            $("#animate").children("#box").css("left", "0");
            sam; // Pass the variable, not the result of the function
        });
};
sam(); // Call the function the first time.

Однако я замечаю, что #box это идентификатор. Итак, я экстраполировал то, что, по моему мнению, вы хотите сделать, и придумал эту демонстрацию:

 var sam = function() { // Changed this to show functions are variables
    $("#box").animate({left: $("#animate").width()   'px'}, 1000, 'linear')
             .animate({left: '-'   $("#box").width()   'px'}, 0, 'linear', sam);
};
sam(); // Call the function the first time.

 #animate {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
  overflow: hidden;
}
#box {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 0;
  top: 0;
  background-color: blue;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="animate">
  <div id="box"></div>
</div>

Или JsFiddle, если вы предпочитаете: http://jsfiddle.net/Gisleburt/tn8j7w8p/1 /