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

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

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

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

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

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

第二次點(diǎn)擊事件動(dòng)畫(huà)沒(méi)反應(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，所以沒(méi)反應(yīng)。
解決方法：

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

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

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

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

 
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à)都會(huì)重新獲取“當(dāng)前page頂部到其父元素頂部的距離”。

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

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

相關(guān)文章

  • Jquery中基本選擇器用法實(shí)例詳解

    Jquery中基本選擇器用法實(shí)例詳解

    這篇文章主要介紹了Jquery中基本選擇器用法,以實(shí)例形式較為詳細(xì)的分析了jQuery中常見(jiàn)選擇器的使用方法,并備有較為詳細(xì)的備注說(shuō)明,需要的朋友可以參考下
    2015-05-05
  • 基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能

    基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能

    前進(jìn)與后退在瀏覽網(wǎng)頁(yè)的時(shí)候是比較常見(jiàn)的而且非常的實(shí)用，接下來(lái)為大家分享下使用jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退，感興趣的朋友可以參考下哈
    2013-04-04
  • jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)

    jQuery+css實(shí)現(xiàn)圖片滾動(dòng)效果(附源碼)

    圖片滾動(dòng)效果想必大家都已司空見(jiàn)慣了吧，接下來(lái)本文介紹下jQuery+CSS實(shí)現(xiàn)圖片滾動(dòng)，感興趣的你可不要錯(cuò)過(guò)了哈，希望可以幫助到你
    2013-03-03
  • jQuery中val()方法用法實(shí)例

    jQuery中val()方法用法實(shí)例

    這篇文章主要介紹了jQuery中val()方法用法,以實(shí)例形式分析了val()方法的兩種常見(jiàn)用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • 圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實(shí)現(xiàn)

    圣誕節(jié)Merry Christmas給博客添加浪漫的下雪效果基于jquery實(shí)現(xiàn)

    一年一度的圣誕節(jié)又到了，首先祝大家好運(yùn)一串串，健康一年年，平安到永遠(yuǎn)！今天就教大家如何在博客中添加紛紛揚(yáng)揚(yáng)的下雪效果。今天，你那里下雪了嗎
    2012-12-12
  • Jquery 基礎(chǔ)學(xué)習(xí)筆記之文檔處理

    Jquery 基礎(chǔ)學(xué)習(xí)筆記之文檔處理

    本節(jié)讓我們繼續(xù)Jquery知識(shí)的了解：文檔處理。文檔處理主要是對(duì)HTML元素進(jìn)行一些增操作，刪除操作，復(fù)制操作，替換操作。
    2009-05-05
  • jQuery簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    jQuery簡(jiǎn)介_(kāi)動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

    目前jQuery有1.x和2.x兩個(gè)主要版本，區(qū)別在于2.x移除了對(duì)古老的IE 6、7、8的支持，因此2.x的代碼更精簡(jiǎn)。選擇哪個(gè)版本主要取決于你是否想支持IE 6~8，下文給大分享jquery 簡(jiǎn)介的相關(guān)知識(shí)，感興趣的朋友一起看看吧
    2017-07-07
  • jQuery實(shí)現(xiàn)穿梭框效果

    jQuery實(shí)現(xiàn)穿梭框效果

    這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)穿梭框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-01-01
  • 基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞

    基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞

    這篇文章主要介紹了基于JQuery和DWR實(shí)現(xiàn)異步數(shù)據(jù)傳遞,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-10-10
  • jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例

    jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例

    本篇文章主要是對(duì)jquery easyui中treegrid用法的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-02-02

最新評(píng)論