DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jQuery中animate動畫第二次點擊事件沒反應
jQuery中animate動畫第二次點擊事件沒反應
編輯:JavaScript綜合知識     

   這篇文章主要介紹了jQuery中animate動畫第二次點擊事件沒反應的解決方法,非常的實用,有需要的小伙伴可以參考下

  用animate做點擊翻頁動畫時發現第二次點擊事件動畫沒反應,而第一次點擊有動畫效果,代碼如下:

   代碼如下:

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

  第二次點擊事件動畫沒反應的原因:top是page元素頂部相與其父元素頂部的距離,第一次點擊後,page元素頂部已經移動到距其父元素頂部-300px的位置,第二次點擊時的並不是page在移動後的位置繼續t移動-300px,而是當前的位置據其父元素頂部-300px。顯然第一次已經移動到top:-300px的位置,第二次的top:-300px移動距離為0,所以沒反應。

  解決方法:

   代碼如下:

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

  top:“-=300px”,這樣第二次點擊時會在第一次點擊後的位置上繼續移動-300px。

  如果動畫移動的距離是變量,就不能用“-=變量名”來寫了:

  ?

1 2 3 4 5 6 7   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,得到的值是數值;

  var page_top=parseInt($(".page").css("top"));獲取當前page頂部到其父元素頂部的距離並賦值給page_top,(parseInt:去掉"PX");

  var move=wrap_top+page_h;計算移動距離;

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

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

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

        注< >:更多精彩教程請關注編程

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved