循環格動畫

Question

我試圖讓一個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>

它只運行一次。我做錯了什麼，如何解決？

Answer 1

這裏是一個純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>

Answer 2

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>

Answer 3

你可以只調用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/

Answer 4

你需要使用的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); 
} 

Answer 5

有幾種方法可以做到這一點，我建議使用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>

Answer 6

你爲什麼不只是使用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>

Answer 7

你可以用動畫的方法的完整功能，你不這樣做真的需要在這裏暫停。
像純粹的CSS動畫Rounin建議也是一個選項。

.animate()

完整 類型：Function（） 要調用的函數一旦動畫完成，稱爲每一個匹配元素一次。

這裏是一個例子。

$(document).ready(function() { 
 
    function arrowmovement() { 
 
     var d = ($("#downarrowimg").css('margin-top') === "-30px") ? "+" : "-"; 
 
     $("#downarrowimg").animate({ 
 
      'margin-top' : d + "=30px" 
 
     }, 500, // duration 
 
\t 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>

Answer 8

$(document).ready(function() { 
 
    function arrowUp() { 
 
    $("#downarrowing").animate(
 
    \t {'margin-top': "-=30px"}, 600, function(){arrowDown()}); 
 
    } 
 

 
    function arrowDown() { 
 
    \t $("#downarrowing").animate(
 
    \t {'margin-top': "+=30px"}, 600, function(){arrowUp()}); 
 
    } 
 
\t 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>

Answer 9

這很容易理解。

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

     $('#downarrow').animate({'margin-top':operator+10}, 500); 
    } 
});