jquery動畫全部完成

我遇到了一個jQuery動畫帶來的問題。我讓用戶能夠點擊一個按鈕，並根據他們點擊的按鈕方向，將所有列表中的（li）元素滑動到相反的方向。問題在於我將它設置爲在div內環繞，所以當列表元素在一側結束時，它將動畫從div視線中滑出，但將CSS樣式屬性設置爲離開屏幕的另一側因此可以準備向下滾動以進行下一個按鈕點擊。但是當用戶多次點擊按鈕時，它會將所有元素排在彼此之上，因爲動畫還沒有完成。然後，我將stop（）動畫附加到元素上，但第二個問題是，當用戶多次單擊按鈕時，元素永遠不會環繞，它們將保持消失狀態，直到您單擊按鈕緩慢，或如果你開始按下按鈕快後它們中的一些dissappeared然後開始背時可以看到，當慢在div仍包裹，直到周圍的下一個包裝慢則只有那些：jquery動畫全部完成

簡單的例子：

function Rotate(){ 
    $("li.headline").each(function(){ 
     var left= $(this).css("left"); 
     left=left-100; 
     if(left>99){ 
     $(this).stop().animation({left:left}, 'slow', function(){ 
     $(this).css("left",left);}); 
     }else{ 
     $(this).stop().animation({left:left}, 'slow', function(){ 
     $(this).css("left",max);}); //max is the max "left" calculated from all list items 
     } 
    }); 
} 
$("button.next").click(function(){ 
Rotate(); 
});

可能有人幫助我

HTML/CSS例子

#scroll{ 
position:relative; 
overflow:hidden; 
width:300px 
} 
.headline{ 
position:absolute; 
float:left 
} 

    <div id="scroll"> 
    <ul> 
     <li class="headline"><a>First</a> 
     <li class="headline"><a>Second</a> 
     <li class="headline"><a>Third</a> 
     <li class="headline"><a>Fourth</a> 
     <li class="headline"><a>Fifth</a> 
    </ul> 
    <div>

來源

2010-11-03 Jake

你可以發佈你的HTML的一個例子，以及糾正問題？指向jsFiddle.net示例的鏈接對於重現您所看到的行爲非常有幫助。 – 2010-11-05 17:34:45

仍然遇到重複問題。你能檢查你的CSS嗎？我不認爲你的意思是兩個＃滾動樣式。我在這裏粘貼了你的代碼，http://jsfiddle.net/4gR8S/，但是不能複製這個問題。請更新並與repro分享更新的鏈接。 – 2010-11-05 20:25:32

你是對的我沒有通過在「if」條件中添加一個檢查來解決問題。將張貼與回答 – Jake 2010-11-08 19:34:19

我通過在如果條件增加了額外的檢查爲使

var index;//this is the current li at the head that is incremented by the button click 
//and updated outside this function 
$("li.headline").each(function(i){ //added i to get the current index the each is on 
if(left>99&&index==i){ 
    $(this).stop(true, false).animation({left:left}, 'slow', function(){ //also made the first true 
     //and second false, so the animation wouldn't rush across the screen but true so it wouldn't 
     // build up the queue 
    $(this).css("left",left);}); 
    }else{ 
    $(this).stop(true, false).animation({left:left}, 'slow', function(){ 
    $(this).css("left",max);}); //max is the max "left" calculated from all list items 
    }

來源

2010-11-08 19:36:42 Jake

你試過嗎？

$(this).stop(true, true) // remainder of your code

它將清除匹配元素的動畫隊列並完成動畫。兩者的默認值都是false，這意味着任何排隊的動畫仍在運行（只有當前動畫停止），並且當前動畫未完成。

http://api.jquery.com/stop/

來源

2010-11-03 21:30:03

不。這會導致相同的行爲。 – Jake 2010-11-05 13:00:24

實際上通過添加stop（true，true）來代替它，如果按鈕按壓過快，它會使div <99縮小 – Jake 2010-11-05 19:24:56

jquery動畫全部完成

回答

相關問題