使用jquery添加和刪除類時的奇怪行爲

我有一些預定義的CSS類，使用它我可以爲div創建動畫。這種情況是，我正在嘗試使用「幻燈片效果」爲div設置動畫效果。只需在div中添加'slide in'類，就可以讓div滑入。但是第二次出現問題時就會出現問題。第二次，div將已經'滑入'類，所以我刪除'幻燈片'類，我再次添加相同的類動畫。但是動畫並沒有發生，但是當我在刪除'slide in'類之後添加'slide in'類之前添加了10ms的延遲之後，就會出現動畫。使用jquery添加和刪除類時的奇怪行爲

演示，效果很好只能在WebKit瀏覽器

演示一個，（沒有時間延遲增加，動畫不起作用第二次）

Demo1嘗試在按鈕兩次的幻燈片。

演示二，（延時增加，動漫作品）

Demo2嘗試在按鈕兩次的幻燈片。

我想知道，如何能不依賴於時間延遲完成

來源

2012-10-23 syed imty

我知道，這不是回答你的問題，但它可能是更容易使用http://jqueryui.com/effect/代替 – david

對於演示1 - 此更換你的幻燈片功能：

function slide(){ 
    $('#tg').addClass('slide in'); 
var t= setTimeout(function(){$('#tg').removeClass('slide in');},600); 
}

我刪除了類動畫完成後，。演示：http://jsbin.com/eyerot/12/edit

對於自動滾屏：這個替換您的JS：

function slide(){ 
    interval = setInterval(function(){slide_me();},2000); 
} 

function slide_me(){ 
    $('#tg').addClass('slide in'); 
    t= setTimeout(function(){$('#tg').removeClass('slide in');},600); 
}

來源

2012-10-23 10:23:37 RRikesh

很好的解決方案，謝謝.. –

做將是你的動畫元素綁定到animationend回調CSS動畫完成時被炒魷魚的最好的事情。

這是我怎麼會重寫你的JS：

// Bind your element to animationend callbacks from all supporting browsers 
$('#tg').bind('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(event){ 
    // Each time this callback is called the "slide in" classes are removed. 
    $('#tg').removeClass('slide in'); 
}); 

// Each time the button is clicked the classes are re-added 
function slide() { 
    $('#tg').addClass('slide in'); 
}

來源

2012-10-23 10:34:08 alexpls

使用jquery添加和刪除類時的奇怪行爲

回答

相關問題