欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery中animate動畫第二次點(diǎn)擊事件沒反應(yīng)

 更新時間：2015年05月07日 08:45:25   投稿：hebedich  
這篇文章主要介紹了jQuery中animate動畫第二次點(diǎn)擊事件沒反應(yīng)的解決方法，非常的實(shí)用，有需要的小伙伴可以參考下

用animate做點(diǎn)擊翻頁動畫時發(fā)現(xiàn)第二次點(diǎn)擊事件動畫沒反應(yīng)，而第一次點(diǎn)擊有動畫效果，代碼如下：

復(fù)制代碼 代碼如下:

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

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

復(fù)制代碼 代碼如下:

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

top:“-=300px”，這樣第二次點(diǎn)擊時會在第一次點(diǎn)擊后的位置上繼續(xù)移動-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');
};

var page_h=$(".page").height();獲取page的高度并賦值給page_h，得到的值是數(shù)值；
var page_top=parseInt($(".page").css("top"));獲取當(dāng)前page頂部到其父元素頂部的距離并賦值給page_top，（parseInt：去掉"PX"）；
var move=wrap_top+page_h;計(jì)算移動距離；

這樣每次動畫都會重新獲取“當(dāng)前page頂部到其父元素頂部的距離”。

注意：$(".page").height()的值是不帶px單位的，$(".page").css("top"))的值是帶px單位的，需要parseInt將單位px像素單位刪除才能計(jì)算。

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

相關(guān)文章

最新評論