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

使用setInterval()功能，您可以在此处阅读： http://www.w3schools.com/jsref/met_win_setinterval.asp

所以你的JS代码应该是：

<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"})
    }
    setInterval(loop, 1200);
});
</script>

Answer 2

Tooschee在正确的方向上回答了问题，虽然我假设你需要在离开#order后重复循环，所以

<script>
$(document).on('ready', function() {
    var order_animation,
        order_loop = function() {
            //downarrow animation
        };

    $("#order").mouseenter(function() {
        order_animation = setInterval(order_loop, 1200);
    }).mouseleave(function() {
        clearTimeout(order_animation);
    });

});
</script>

Answer 3

我知道你正在使用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动画imho）。

Jquery动画功能不会循环

3 个答案: