快捷導(dǎo)航

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

更新時(shí)間：2015年05月07日 08:45:25 投稿：hebedich

這篇文章主要介紹了jQuery中animate動(dòng)畫第二次點(diǎn)擊事件沒反應(yīng)的解決方法，非常的實(shí)用，有需要的小伙伴可以參考下

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

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

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

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

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

top:“-=300px”，這樣第二次點(diǎn)擊時(shí)會(huì)在第一次點(diǎn)擊后的位置上繼續(xù)移動(dòng)-300px。

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

 
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)距離；

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

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

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

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能的方法,涉及jQuery根據(jù)時(shí)間動(dòng)態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
2016-07-07
基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法
這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
jQuery插件 selectToSelect使用方法
最近做一個(gè)報(bào)表頁面顯示位置配置的界面,剛開始時(shí)用的是多個(gè)checkbox,選擇其中需要的報(bào)表即可。后來隨著業(yè)務(wù)變復(fù)雜，需要使用兩個(gè)select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫
2013-10-10
js(jQuery)獲取時(shí)間的方法及常用時(shí)間類搜集
獲取時(shí)間的方法及常用時(shí)間類都是大家經(jīng)常使用的，在本文為大家整理了一些，個(gè)人感覺還比較全，感興趣的朋友可以收集下
2013-10-10
快速掌握jquery分頁插件jqPaginator的使用方法
這篇文章主要幫助大家快速掌握jquery分頁插件jqPaginator的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
JQueryMiniUI按照時(shí)間進(jìn)行查詢的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫QueryMiniUI按照時(shí)間進(jìn)行查詢的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)按鈕只點(diǎn)擊一次后就取消點(diǎn)擊事件綁定的方法,可實(shí)現(xiàn)點(diǎn)擊按鈕后取消onclick事件綁定的功能,需要的朋友可以參考下
2015-06-06
jQuery插件簡(jiǎn)單學(xué)習(xí)實(shí)例教程
這篇文章主要介紹了jQuery插件的簡(jiǎn)單用法,列舉了分頁插件、放大鏡插件、自動(dòng)完成插件、上傳插件、日歷插件等的簡(jiǎn)單使用方法,需要的朋友可以參考下
2016-07-07
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實(shí)際主要是利用了css的li a屬性，對(duì)于以后用css制作更絢麗的效果提高了很好的參考。
2010-08-08
jquery實(shí)現(xiàn)樓層滾動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)樓層滾動(dòng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04