jQuery中animate動畫第二次點擊事件沒反應(yīng)
用animate做點擊翻頁動畫時發(fā)現(xiàn)第二次點擊事件動畫沒反應(yīng)，而第一次點擊有動畫效果，代碼如下：
$(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo');
第二次點擊事件動畫沒反應(yīng)的原因：top是page元素頂部相與其父元素頂部的距離，第一次點擊后，page元素頂部已經(jīng)移動到距其父元素頂部-300px的位置，第二次點擊時的并不是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”，這樣第二次點擊時會在第一次點擊后的位置上繼續(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;計算移動距離；
這樣每次動畫都會重新獲取“當(dāng)前page頂部到其父元素頂部的距離”。
注意：$(".page").height()的值是不帶px單位的，$(".page").css("top"))的值是帶px單位的，需要parseInt將單位px像素單位刪除才能計算。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)簡單倒計時功能的方法,涉及jQuery根據(jù)時間動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07
基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實例分析了jQuery實現(xiàn)鼠標(biāo)特效的原理與詳細步驟,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
最近做一個報表頁面顯示位置配置的界面,剛開始時用的是多個checkbox,選擇其中需要的報表即可。后來隨著業(yè)務(wù)變復(fù)雜，需要使用兩個select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫2013-10-10
獲取時間的方法及常用時間類都是大家經(jīng)常使用的，在本文為大家整理了一些，個人感覺還比較全，感興趣的朋友可以收集下2013-10-10
快速掌握jquery分頁插件jqPaginator的使用方法
這篇文章主要幫助大家快速掌握jquery分頁插件jqPaginator的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JQueryMiniUI按照時間進行查詢的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫QueryMiniUI按照時間進行查詢的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
這篇文章主要介紹了jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法,可實現(xiàn)點擊按鈕后取消onclick事件綁定的功能,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery插件的簡單用法,列舉了分頁插件、放大鏡插件、自動完成插件、上傳插件、日歷插件等的簡單使用方法,需要的朋友可以參考下2016-07-07
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實際主要是利用了css的li a屬性，對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08
這篇文章主要為大家詳細介紹了jquery實現(xiàn)樓層滾動特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04