首頁 > web前端 > js教程 > 主體

jquery中animate動畫累積的解決方法_jquery

WBOY
發布: 2016-05-16 17:20:36
原創
1308 人瀏覽過

昨天一同學向我求助,說做了一個簡單的動畫效果,就是圖片自動左右播放

複製代碼 代碼如下:

/* 無縫式焦點圖*/
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);
}
}

複製程式碼 程式碼如下:


程式碼如下:

我下了,挺簡單的,乍看,沒啥問題。後來他說了困擾他一個月的奇怪問題,他說窗口在最前端時是ok,但把窗口最小化或是瀏覽其他窗口時就話出現快速的播放,過了一會兒又正常了(ie是沒問題的,chrome有問題,firefox也沒問題)。
由於以前也沒遇到過此問題,我也是想了半個多小時,沒搞定,後來翻了翻以前做的筆記,有了答案,那個setTimeout使用時會產生動畫隊列,有可能是在chrome瀏覽器中視窗不處於最前端時動畫的隊列產生積累,當回歸最前端時便一下子爆發出來了,於是想到jquery中的stop方法,該方法是停止所有在此元素上的動畫。果然,加上後就ok了
複製代碼


代碼如下:


/* 無縫式焦點圖*/
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(); 🎜>
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!