沒有排隊的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動畫

回答

相關問題