Question

所以，我有这个网页，我使用这个名为transit的库来动画3d旋转和其他css转换。我有三个链接，当鼠标悬停在它们上面时，它们应该扩大1.2倍。它工作正常，一切都很好，花花公子，直到我快速地将鼠标放在图标上几次。它不是仅仅发生一次动画，而是连续多次出现（或者我将鼠标放在它上面多少次）。我如何做到这一点，无论鼠标在div上运行多少次，它只会动画一次（如长时间悬停）？

我清楚了吗？

这里的网站链接： LINK

这里是jquery代码：

//FYI, the div id is "rotater"    
$(function(){  // $(document).ready shorthand
                $('#background').hide(); 
                $( "#banner").hide();
                $( "#rotater").hide();
                $( ".tab" ).hide();
                $( ".content" ).hide();
                $( "#share" ).hide();
                $( ".sidenav").hide();
                $("#navigation").animate({top:"100%"});
                window.setTimeout(function(){$('#banner').fadeIn('slow');$("#navigation").animate({top:"0"});
                                             $('#background').fadeIn('slow');
                                             $("#rotater").fadeIn("fast").transition({rotateY:360, duration:3000});
                                            $( "#share" ).fadeIn("slow");$(".sidenav").fadeIn("slow");
                                            $("#ha").animate({top:"25%",left:"3%"});$("#do").animate({top:"45%",left:"3%"});
                                            $("#set").animate({top:"65%",left:"3%"});$("#net").animate({top:"25%",left:"75%"});
                                            $("#dasu").animate({top:"65%",left:"75%"});}, 1000);
                $( ".sidenav" ).hover(function(){$("#"+this.id).transition({scale:1.2});}, function(){$("#"+this.id).transition({scale:1});}); // THIS IS THE CODE IN QUESTION
                $( "#share" ).hover(function(){$( "#share" ).animate({left:"0%"});}, function(){$( "#share" ).animate({left:"-15%"});});
                var cw = $('#rotater').width();
                $('#rotater').css({'height':cw+'px'});
                setInterval(function(){$("#rotater").transition({rotateY:'+=360deg', duration:3000});},10000);

            });
            $(window).load(function() {
               $(".loader").fadeOut("slow");
            })

Answer 1

如果您不希望多个jQuery动画按顺序运行，那么您需要在开始每个动画之前调用$(yourObj).stop()。您可以使用.stop(a, b)的参数来控制究竟发生了什么 - 动画是否刚刚停止，新动画从那里开始，或者在下一个动画开始之前是否跳转到结束状态等等。

有关详细信息，请参阅jQuery doc for .stop()。通常，你想要的是这个：

$(yourObj).stop(true, true);

将上一个动画跳转到结束状态并从队列中清除它，以便下一个动画可以立即开始，就像第一个动画已经完成一样。您可能希望在每个jQuery动画之前调用它，这些动画可能在第一个完成之前再次被调用。

例如，您可以更改此内容：

$( "#share" ).hover(function(){
    $( "#share" ).animate({left:"0%"});
}, function(){
    $( "#share" ).animate({left:"-15%"});
});

到此：

$( "#share" ).hover(function(){
    $( "#share" ).stop(true, true).animate({left:"0%"});
}, function(){
    $( "#share" ).stop(true, true).animate({left:"-15%"});
});

在某些情况下，您不希望将第二个参数设置为true（因此您可能只需要.stop(true)而不是.stop(true, true)。您可能希望将当前动画设置为只是停在它的位置，然后让新动画从那里拿起它 - 这实际上取决于具体的操作以及你想要它的表现。

如何根据出现的jquery停止多个动画的排队

1 个答案: