javascript - Jquery 动画函数不会循环

Question

我对 jquery 和一般的 javscript 真的很陌生。当#order 悬停时，我试图让 .downarrow 图像出现。 .downarrow 然后向下滑动，消失，然后只要用户的鼠标仍在#order 上，整个过程就会重复。我可能缺少一些明显的东西，但我们将不胜感激!

这是我的 CSS 规则:

.start_info {
    float:left;
    margin-top: 150px;
    width: 176px;
}
.start_text {
    font-family: "glegoo";
    font-size: 36px;
    width: 100%;
    text-align: center;
    color: #555;
}
.downarrow {
    margin-left: 50px;
    margin-top: 20px;
    opacity: 0;
}

这是 HTML:

<div class="start_button_container">
<div class="flip-container" id="order">
    <div class="flipper" >
        <div class="front">
            <img src="../../imgs/howto/order.png" >
        </div>
        <div class="back">
        <img src="../../imgs/howto/order1.png">
        </div>
    </div>
    <div class="start_info" id="order_info">
    <img src="../../imgs/howto/order_down.png" class="downarrow">
    </div>
</div>

这是脚本:

<script>
$( "#order" ).mouseenter(function() {
    function loop() {
        $( ".downarrow" ).animate({
            opacity: 1
        }, { queue: false, duration: 300 })
        .delay(600);
        $( ".downarrow" ).animate({
            marginTop: '+=20'
        }, { queue: false, duration: 600 })
        $( ".downarrow" ).animate({
            opacity: 0
        }, { queue: false, duration: 300 });
        $( ".downarrow" ).css({marginTop: "20px"})
    }
    loop();
});
</script>

Answer 1

我知道您正在使用 jQuery，因此您可能想要朝这个方向的解决方案，但我认为您可以使用 CSS 动画(对前缀表示歉意)更轻松、更优雅地完成它:

CSS:

.anim{
    -moz-animation-duration: 1s;
    -moz-animation-name: arrowdown;
    -moz-animation-iteration-count: infinite;
}
@-moz-keyframes arrowdown{
    from {
        top: -100px;
        opacity: 1;
    }   
    to {
        top: -10px;
        opacity: 0;
    } 
}

Javascript:

var butt = document.getElementById('orderbutton');
var arr = document.getElementById('downarrow');

butt.onmouseover = function(){ 
                       arr.className += " anim"; 
                       arr.style.display = "block"; 
                   }

butt.onmouseout = function(){
                       arr.className -= " anim";
                       arr.style.display = "none"; 
                   }

动画中的 top 值仅供示例使用

这是一个 fiddle

想法是在带有箭头但默认隐藏(display: none)的按钮中创建一个嵌套图像。这样，您的 top 值是相对于按钮本身的(不要忘记在图像上设置 position: absolute)。然后创建一个动画，在顶部和底部都有一个关键帧，箭头在此处淡出。将迭代设置为无限，然后通过 Javascript(jQuery 或其他)设置适当的事件处理程序。

我觉得这比尝试做 Javascript 动画要简单得多，在 jQuery 中，Javascript 动画可能很慢而且很麻烦(虽然 Javascript 动画可以很快，但通常用于有大量动画的情况 -这太简单了，无法证明 javascript 动画的合理性。恕我直言)。