jquery中animate動(dòng)畫積累的解決方法
更新時(shí)間：2013年10月05日 15:56:26 作者：
setTimeout使用時(shí)會(huì)產(chǎn)生動(dòng)畫隊(duì)列，有可能是在chrome瀏覽器中窗口不處于最前端時(shí)動(dòng)畫的隊(duì)列產(chǎn)生積累，下面為大家介紹下詳細(xì)的解決方法
昨天一同學(xué)向我求助，說做了一個(gè)簡(jiǎn)單的動(dòng)畫效果，就是圖片自動(dòng)左右播放
<span style="white-space:pre"> </span>/* 無縫式焦點(diǎn)圖 */
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();
我瞅了下，挺簡(jiǎn)單的，乍一看，沒啥問題啊。后來他就說了困擾他一個(gè)月的奇怪問題，他說窗口在最前端時(shí)是ok，但把窗口最小化或是瀏覽其他窗口時(shí)就話出現(xiàn)快速的播放，過了一會(huì)兒又正常了（ie是沒問題的，chrome有問題，firefox也沒問題）。
由于以前也沒遇到過此問題，我也是想了半個(gè)多小時(shí)，沒搞定，后來翻了翻以前做的筆記，有了答案，那個(gè)setTimeout使用時(shí)會(huì)產(chǎn)生動(dòng)畫隊(duì)列，有可能是在chrome瀏覽器中窗口不處于最前端時(shí)動(dòng)畫的隊(duì)列產(chǎn)生積累，當(dāng)回歸最前端時(shí)便一下子爆發(fā)出來了，于是想到j(luò)query中的stop方法，該方法是停止所有在此元素上的動(dòng)畫。果然，加上后就ok了
<span style="white-space:pre"> </span>/* 無縫式焦點(diǎn)圖 */
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();
復(fù)制代碼 代碼如下:
<span style="white-space:pre"> </span>/* 無縫式焦點(diǎn)圖 */
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();
復(fù)制代碼 代碼如下:
我瞅了下，挺簡(jiǎn)單的，乍一看，沒啥問題啊。后來他就說了困擾他一個(gè)月的奇怪問題，他說窗口在最前端時(shí)是ok，但把窗口最小化或是瀏覽其他窗口時(shí)就話出現(xiàn)快速的播放，過了一會(huì)兒又正常了（ie是沒問題的，chrome有問題，firefox也沒問題）。
由于以前也沒遇到過此問題，我也是想了半個(gè)多小時(shí)，沒搞定，后來翻了翻以前做的筆記，有了答案，那個(gè)setTimeout使用時(shí)會(huì)產(chǎn)生動(dòng)畫隊(duì)列，有可能是在chrome瀏覽器中窗口不處于最前端時(shí)動(dòng)畫的隊(duì)列產(chǎn)生積累，當(dāng)回歸最前端時(shí)便一下子爆發(fā)出來了，于是想到j(luò)query中的stop方法，該方法是停止所有在此元素上的動(dòng)畫。果然，加上后就ok了
復(fù)制代碼 代碼如下:
<span style="white-space:pre"> </span>/* 無縫式焦點(diǎn)圖 */
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();
您可能感興趣的文章:
- js實(shí)現(xiàn)類似jquery里animate動(dòng)畫效果的方法
- jQuery中animate動(dòng)畫第二次點(diǎn)擊事件沒反應(yīng)
- 原生js仿jquery animate動(dòng)畫效果
- jquery animate動(dòng)畫持續(xù)運(yùn)動(dòng)的實(shí)例
- jQuery動(dòng)畫animate方法使用介紹
- jquery animate 動(dòng)畫效果使用說明
- jQuery動(dòng)畫效果animate和scrollTop結(jié)合使用實(shí)例
- JQuery動(dòng)畫animate的stop方法使用詳解
- jQuery中使用animate自定義動(dòng)畫的方法
- JQuery animate動(dòng)畫應(yīng)用示例
相關(guān)文章
jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的fixedMenu下拉菜單效果代碼,通過自定義fixedMenu方法實(shí)現(xiàn)點(diǎn)擊下拉菜單效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
Jquery實(shí)現(xiàn)點(diǎn)擊切換圖片并隱藏顯示內(nèi)容(2種方法實(shí)現(xiàn))
電腦屏幕大小是固定的，那么如何在有限的空間放更多的內(nèi)容呢，jquery的tab切換式瀏覽卻可以解決這個(gè)問題2013-04-04
這篇文章主要介紹了12個(gè)實(shí)用的jQuery代碼片段，本文給出了在新窗口打開鏈接、設(shè)置等高的列、jQuery預(yù)加載圖像、禁用鼠標(biāo)右鍵、設(shè)定計(jì)時(shí)器等實(shí)用代碼片段,需要的朋友可以參考下2016-03-03
基于jquery的一個(gè)簡(jiǎn)單的腳本驗(yàn)證插件
基于jquery的一個(gè)簡(jiǎn)單的腳本驗(yàn)證插件，希望能對(duì)大家有所幫助，有demo2010-04-04
Bootstrap嵌入jqGrid，使你的table牛逼起來
這篇文章主要介紹了Bootstrap嵌入jqGrid，使你的table牛逼起來,需要的朋友可以參考下2016-05-05
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？它們兩個(gè)之間有什么區(qū)別？這些問題就出現(xiàn)了。下面這篇文章主要給大家介紹了Jquery中attr與prop區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法
下面小編就為大家分享一篇基于input動(dòng)態(tài)模糊查詢的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04
這篇文章主要介紹了綁定回車enter事件代碼,需要的朋友可以參考下2014-05-05
jQuery Ajax提交表單查詢獲得數(shù)據(jù)實(shí)例代碼
用戶輸入一個(gè)表單，輸入準(zhǔn)考證和驗(yàn)證碼，驗(yàn)證用戶是否輸入表單，點(diǎn)擊查詢提交，然后從服務(wù)器得到返回的數(shù)據(jù)并顯示出來2012-09-09