DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery中animate動畫積累的解決方法
jquery中animate動畫積累的解決方法
編輯:JQuery特效代碼     
昨天一同學向我求助,說做了一個簡單的動畫效果,就是圖片自動左右播放
. 代碼如下:
<span style="white-space:pre"> </span>/* 無縫式焦點圖 */
var _left = 770;
var left = -_left;//-770
function slideImg() {
if(left == -3080 || left == 0) {
_left = -_left;
}
$('.slidepics').animate({'left': left + 'px'},1000);
left = left - _left;
tim = setTimeout(slideImg,5000);
}
slideImg();

. 代碼如下:
我瞅了下,挺簡單的,乍一看,沒啥問題啊。後來他就說了困擾他一個月的奇怪問題,他說窗口在最前端時是ok,但把窗口最小化或是浏覽其他窗口時就話出現快速的播放,過了一會兒又正常了(ie是沒問題的,chrome有問題,firefox也沒問題)。

由於以前也沒遇到過此問題,我也是想了半個多小時,沒搞定,後來翻了翻以前做的筆記,有了答案,那個setTimeout使用時會產生動畫隊列,有可能是在chrome浏覽器中窗口不處於最前端時動畫的隊列產生積累,當回歸最前端時便一下子爆發出來了,於是想到jquery中的stop方法,該方法是停止所有在此元素上的動畫。果然,加上後就ok了

. 代碼如下:
<span style="white-space:pre"> </span>/* 無縫式焦點圖 */
var _left = 770;
var left = -_left;//-770
function slideImg() {
if(left == -3080 || left == 0) {
_left = -_left;
}
$('.slidepics').stop().animate({'left': left + 'px'},1000);
left = left - _left;
tim = setTimeout(slideImg,5000);
}
slideImg();
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved