没有排队的jQuery动画

我想弄明白.stop（）和clearQueue（）是如何工作的。这里是我在jsfiddle中的示例代码：http://jsfiddle.net/PsTQv/1/ 如果在几个块上滚动，您将看到动画正在排队。要解决这个问题，我试图用停止（）和clearQueue.Simple隐藏（）或显示（后添加停止）或两者不会work.The的行为，如：没有排队的jQuery动画

1. .stop().hide() : text disappears at last; 
2. .stop.show(): text is alway there, won't be hidden any more 
3. add both: Same as only add to show() 
4. add .clearQueue().stop() in the beginning: text disappears at last, like .stop().hide()

我想了解clearQueue和stop之间有什么区别来解释上面的行为。另外我想知道如何在这个例子中没有排队的情况下实现动画，也就是说，将鼠标悬停在块上，文本显示在幻灯片效果中。

感谢

来源

2013-02-09 Yujun Wu

尝试停止（true，true）或阅读文档:) – mika 2013-02-09 06:16:18

您需要clear the animation queue在回调函数执行当滑动动画完成：

$('.block').hover(function(){ 
    $('section').hide('fast'); 
    //$('section').stop().show('slide',{direction:'left'},1000); 
    $('section').show('slide',{direction:'left'},1000,function(){$(this).clearQueue()}); 
},function(){});

jsFiddle

来源

2013-02-09 06:24:27

var inAnimation = new Array(); 

$("div").hover(function(){ 
    if (!inAnimation[$("div").index(this)]) { 
     $(this).animate({ width: "200px" }); 
    } 
}, function() { 
    inAnimation[$("div").index(this)] = true; 
    $(this).animate({ width: "100px" }, "normal", "linear", function() { 
     inAnimation[$("div").index(this)] = false; 
    }) 
});

来源

2014-01-16 12:48:01

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>clearQueue demo</title> 
    <style> 
    div { 
    margin: 3px; 
    width: 40px; 
    height: 40px; 
    position: absolute; 
    left: 0px; 
    top: 30px; 
    background: green; 
    display: none; 
    } 
    div.newcolor { 
    background: blue; 
    } 
    </style> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<button id="start">Start</button> 
<button id="stop">Stop</button> 
<div></div> 

<script> 
$("#start").click(function() { 
    var myDiv = $("div"); 
    myDiv.show("slow"); 
    myDiv.animate({ 
    left:"+=200" 
    }, 5000); 

    myDiv.queue(function() { 
    var that = $(this); 
    that.addClass("newcolor"); 
    that.dequeue(); 
    }); 

    myDiv.animate({ 
    left:"-=200" 
    }, 1500); 
    myDiv.queue(function() { 
    var that = $(this); 
    that.removeClass("newcolor"); 
    that.dequeue(); 
    }); 
    myDiv.slideUp(); 
}); 

$("#stop").click(function() { 
    var myDiv = $("div"); 
    myDiv.clearQueue(); 
    myDiv.stop(); 
}); 
</script> 

</body> 
</html>

来源

2014-01-16 12:53:07

没有排队的jQuery动画

回答

相关问题