Я пытаюсь получить div для постоянной анимации:

$(document).ready(function() {
  function arrowmovement() {
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "-=30px"
      });
    }, 500);
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "+=30px"
      });
    }, 500);
  }
  arrowmovement();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Это работает только один раз. Что я делаю не так и как мне это исправить?

1
David Tunnell 19 Дек 2015 в 02:21

9 ответов

Лучший ответ

Вот чистое решение CSS, которое непрерывно анимирует #downarrow:

@keyframes downarrowanimation {
    0% {margin-top: 30px;}
    50% {margin-top: -30px;}
    100% {margin-top: 30px;}
}

#downarrow {
    animation: downarrowanimation 1s ease-in-out infinite;
}
<div id="downarrow">
<img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>
3
Rounin 18 Дек 2015 в 23:44

Вы можете просто вызвать функцию arrowmovement в конце каждой анимации:

function arrowmovement(direction) {
    $("#downarrowimg").animate({
        'margin-top': "+="+ (30 * direction) +"px"
    }, 500, function() {
        arrowmovement(direction * -1);
    });
}

$(document).ready(function() {
    arrowmovement(1);
});

Демонстрация: https://jsfiddle.net/louisbros/dhwoejon/

0
louisbros 18 Дек 2015 в 23:48

Есть несколько способов сделать это, я предлагаю использовать setInterval () , посмотрите пример ниже.

Надеюсь это поможет.


var down=true;

setInterval(function() {
  if( down ){
      $( "#downarrowimg" ).animate({
        'margin-top' : "-=30px"
      }, function() {
        down=false;
      });
  }else{
    $( "#downarrowimg" ).animate({
        'margin-top' : "+=30px"
    }, function() {
        down=true;
    });
  }
},500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>
1
Zakaria Acharki 18 Дек 2015 в 23:33
$(document).ready(function() {
  function arrowUp() {
    $("#downarrowing").animate(
    	{'margin-top': "-=30px"}, 600, function(){arrowDown()});
  }

  function arrowDown() {
  	$("#downarrowing").animate(
    	{'margin-top': "+=30px"}, 600, function(){arrowUp()});
  }
	arrowUp();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="downarrowing" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>
1
tao 18 Дек 2015 в 23:51

JQuery действительно плох в анимации. Пакет анимации Greensock (GSAP) - это фантастическая и легкая библиотека анимаций, в которую вы могли бы заглянуть.

TweenMax.to($("div"), .5, {y: "+=50", ease: Linear.easeNone, yoyo: true, repeat: -1});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>

Одна строка делает все, что вам нужно. Если вы хотите более сложное смягчение, используйте класс TimelineMax для объединения анимаций.

var timeline = new TimelineMax({repeat: -1});
timeline.to($("div"), .5, {y: "+=50", ease: Power2.easeOut});
timeline.to($("div"), .5, {y: "-=50", ease: Power2.easeOut});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.1/TweenMax.min.js"></script>
<div style="width: 50px; height: 50px; background-color: red;"></div>
-1
jered 18 Дек 2015 в 23:31

Вы можете использовать полную функцию метода animate, и вам не нужен тайм-аут здесь.
Также может быть предложена чистая CSS-анимация, подобная предложенной Rounin .

< Сильный > .animate ( )

< Сильный > полный Тип: Функция () Функция, которая вызывается после завершения анимации, вызывается один раз для соответствующего элемента.

Вот пример.

$( document ).ready(function() {
    function arrowmovement() {
        var d = ($( "#downarrowimg" ).css('margin-top') === "-30px") ?  "+" : "-";
        $( "#downarrowimg" ).animate({
            'margin-top' : d + "=30px"
        }, 500, // duration
	function() { // complete fn
            arrowmovement();
        });
    }
    arrowmovement();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>
1
DavidDomain 18 Дек 2015 в 23:51

Это просто понять.

$(document).ready(function (argument) {
     var operator = '-'; 
     setInterval(arrowMovement,500);
     function arrowMovement() { 
        if(operator == '-') { 
             operator = '+' 
        }  else { 
             operator = '-' 
        } 

        $('#downarrow').animate({'margin-top':operator+10}, 500);  
     } 
 });
0
Zakaria Acharki 21 Дек 2015 в 14:56

Почему бы вам просто не использовать CSS? Вы получаете всю приятность с дополнительным преимуществом ускорения анимации на GPU.

@keyframes bounce {
  from {margin-top: 30px;}
  to {margin-top: -30px;}
}

.arrow {
  animation-name: bounce;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
<div id="downarrow">
      <img class="arrow" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
    </div>
0
Tyler Sebastian 18 Дек 2015 в 23:35

Вам нужно использовать setInterval ().

$(document).ready(function() {
  var repeatIt = setInterval(arrowmovement, 1000);
  function arrowmovement() {
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "-=30px"
      });
    }, 500);
    setTimeout(function() {
      $("#downarrowimg").animate({
        'margin-top': "+=30px"
      });
    }, 500);
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="downarrow">
  <img id="downarrowimg" src="https://upload.wikimedia.org/wikipedia/en/f/f1/Down_Arrow_Icon.png">
</div>

Установите его в переменную, чтобы вы могли остановить его:

function abortTimer() { // to be called when you want to stop the timer
  clearInterval(repeatIt);
}
0
G-Cyrillus 18 Дек 2015 в 23:32