jQuery中animate動畫第二次點(diǎn)擊事件沒反應(yīng)
用animate做點(diǎn)擊翻頁動畫時(shí)發(fā)現(xiàn)第二次點(diǎn)擊事件動畫沒反應(yīng)，而第一次點(diǎn)擊有動畫效果，代碼如下：
$(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo');
第二次點(diǎn)擊事件動畫沒反應(yīng)的原因：top是page元素頂部相與其父元素頂部的距離，第一次點(diǎn)擊后，page元素頂部已經(jīng)移動到距其父元素頂部-300px的位置，第二次點(diǎn)擊時(shí)的并不是page在移動后的位置繼續(xù)t移動-300px，而是當(dāng)前的位置據(jù)其父元素頂部-300px。顯然第一次已經(jīng)移動到top：-300px的位置，第二次的top：-300px移動距離為0，所以沒反應(yīng)。
解決方法：
$(".page").stop().animate({top:“-=300px”}, 800, 'easeInOutExpo');
top:“-=300px”，這樣第二次點(diǎn)擊時(shí)會在第一次點(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)文章
這篇文章主要介紹了Jquery中基本選擇器用法,以實(shí)例形式較為詳細(xì)的分析了jQuery中常見選擇器的使用方法,并備有較為詳細(xì)的備注說明,需要的朋友可以參考下2015-05-05
基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能
前進(jìn)與后退在瀏覽網(wǎng)頁的時(shí)候是比較常見的而且非常的實(shí)用，接下來為大家分享下使用jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退，感興趣的朋友可以參考下哈2013-04-04
jQuery+css實(shí)現(xiàn)圖片滾動效果(附源碼)
圖片滾動效果想必大家都已司空見慣了吧，接下來本文介紹下jQuery+CSS實(shí)現(xiàn)圖片滾動，感興趣的你可不要錯(cuò)過了哈，希望可以幫助到你2013-03-03
這篇文章主要介紹了jQuery中val()方法用法,以實(shí)例形式分析了val()方法的兩種常見用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實(shí)現(xiàn)
一年一度的圣誕節(jié)又到了，首先祝大家好運(yùn)一串串，健康一年年，平安到永遠(yuǎn)！今天就教大家如何在博客中添加紛紛揚(yáng)揚(yáng)的下雪效果。今天，你那里下雪了嗎2012-12-12
Jquery 基礎(chǔ)學(xué)習(xí)筆記之文檔處理
本節(jié)讓我們繼續(xù)Jquery知識的了解：文檔處理。文檔處理主要是對HTML元素進(jìn)行一些增操作，刪除操作，復(fù)制操作，替換操作。2009-05-05
jQuery簡介_動力節(jié)點(diǎn)Java學(xué)院整理
目前jQuery有1.x和2.x兩個(gè)主要版本，區(qū)別在于2.x移除了對古老的IE 6、7、8的支持，因此2.x的代碼更精簡。選擇哪個(gè)版本主要取決于你是否想支持IE 6~8，下文給大分享jquery 簡介的相關(guān)知識，感興趣的朋友一起看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞
這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
jquery easyui中treegrid用法的簡單實(shí)例
本篇文章主要是對jquery easyui中treegrid用法的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02