2011-12-14 86 views
0

在一個div中,我放置了一些div,並設置了溢出:隱藏。主div可以顯示五個子div,之後我需要滾動查看其餘的div。向下滾動我創建了一個div,並點擊該div的功能,我正在滾動div的其餘部分。代碼如下:爲什麼當我點擊div更快時,jQuery的animate()函數不起作用?

if(whatsupobj.length > 5){ 
    $('#scrolldown').click(function(){ 
     var toppx = whatsupobj.length-1; 
     var lastdivtoppx = '268px';          
     if($('#subdiv'+toppx).css('top') !== lastdivtoppx){ 
      $(".subdiv").animate({"top": "-=67px"}, "medium"); 
     } 
    }); 

    $('#scrollup').click(function(){ 
     if($('#subdiv0').css('top') !== '0px'){ 
      $(".subdiv").animate({"top": "+=67px"}, "medium"); 
     } 
    }); 
}else{ 
    $('#scrollup').unbind("click"); 
    $('#scrolldown').unbind("click"); 
} 

其工作正常只有一個問題。問題是,當我點擊scrolldown非常快,然後子div繼續下去。但是當我點擊scrolldown通常然後停止時最後的div顯示自己。我知道我可以增加或減少動畫的速度,但它的速度並不快。我該如何解決這個問題?提前致謝。

+0

我只是找出這個鏈接。它解決了我的問題 http://stackoverflow.com/questions/5380722/disable-a-link-temporarily-when-clicked – Piscean 2011-12-14 12:50:43

回答

1

據我可以告訴你的問題可能是這個.animate({"top": "+=67px"}的一段代碼。

您應該添加.stop(),所以當你再次點擊和一點兒也不只知道不斷前進,像這樣停止:$(".subdiv").stop().animate({"top": "+=67px"}, "medium");

現在,您的問題將是您的加減原始值,除非動畫完成,否則你的值將全部搞亂。

最好的解決方案是在做這些類型的動畫時不要加減,最好從元素本身獲取你的css值,或者至少明確地設置css值,如下所示:animate({"top": "67px"},但你會有構建一種爲每個後續點擊找到正確值的方法。

第二種選擇是將stop()設置爲自動轉到動畫的結尾,如果處理程序被重複點擊,這會讓您的動畫略過一點,但這是解決問題的最簡單方法,看起來像這樣:

$(".subdiv").stop(true, true).animate({"top": "+=67px"}, "medium");

相關問題