jquery - jquery将悬停添加到动画

Question

我有一个 div，它使用以下代码在连续循环中进出动画：

$(document).ready(function() { 
setInterval(function () {
    $("#possum-animate").animate({
    bottom:"32"
    }, 3000 ).delay(10000).animate({
    bottom:"-70"
    }, 3000).delay(10000);
}, 10000);  
});

如何添加悬停功能，以便在悬停 div 时完成动画显示，然后在悬停时隐藏 div 并再次开始连续循环。

Answer 1

你可以做这样的事情

$(document).ready(function() { 

    function timeFunction(){

        var timeInterval = setInterval(function () {        

        $("#possum-animate").animate({

         bottom:"32"

    }, 3000 ).delay(10000).animate({

        bottom:"-70"

    }, 3000).delay(10000);

  }, 10000);     

return timeInterval;

}

// Start animating on page load

var timeInterval = timeFunction();

$("#possum-animate").bind({

    mouseenter: function(e){

        e.preventDefault();

        clearTimeout(timeInterval);
        $("#possum-animate").clearQueue(); 
        $("#possum-animate").stop();

    },

    mouseleave: function(e){

        e.preventDefault();

        timeInterval = timeFunction();

    } 

});

});

Answer 2

尝试

$(document).ready(function() {
    var flag = true;
    setInterval(function() {
                if (flag) {
                    $("#possum-animate").animate({
                                bottom : "32"
                            }, 3000).delay(10000).queue(function() {
                                $("#possum-animate").animate({
                                            bottom : "-70"
                                        }, 3000)
                            });
                }
            }, 10000);

    $("#possum-animate").hover(function() {
                flag = false;
                $(this).stop().animate({
                            bottom : "32"
                        }, 3000);
            }, function() {
                $(this).stop().animate({
                            bottom : "-70"
                        }, 3000);
                flag = true;
            });
});