jQuery中animate動畫第二次點擊事件沒反應

2024-05-06 16:19:33

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了jQuery中animate動畫第二次點擊事件沒反應的解決方法，非常的實用，有需要的小伙伴可以參考下

用animate做點擊翻頁動畫時發現第二次點擊事件動畫沒反應，而第一次點擊有動畫效果，代碼如下：

復制代碼代碼如下:

$(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo');

第二次點擊事件動畫沒反應的原因：top是page元素頂部相與其父元素頂部的距離，第一次點擊后，page元素頂部已經移動到距其父元素頂部-300px的位置，第二次點擊時的并不是page在移動后的位置繼續t移動-300px，而是當前的位置據其父元素頂部-300px。顯然第一次已經移動到top：-300px的位置，第二次的top：-300px移動距離為0，所以沒反應。
解決方法：

復制代碼代碼如下:

$(".page").stop().animate({top:“-=300px”}, 800, 'easeInOutExpo');

top:“-=300px”，這樣第二次點擊時會在第一次點擊后的位置上繼續移動-300px。

如果動畫移動的距離是變量，就不能用“-=變量名”來寫了：

function down() {

var page_h=$(".page").height(); //687

var page_top=parseInt($(".page").css("top")); //0

var move=wrap_top+page_h;

$(".page").stop().animate({top:move}, 800, 'easeInOutExpo');

};