刪除動畫後的類

我有一個div，我試圖動畫。該div有一個叫做peek_up的動畫類，我正在使用else/if來添加一個動畫，如果應用了peek_up，則會降低div，如果不是，則會將其提升。我的問題是，即使應用了peek_up，我正在使用的類來提高peek_up類的效果。我將如何去除完成後用於提升的動畫？刪除動畫後的類

$('#box').on('click', function() { 
var $this = $(this); 
if ($this.hasClass('peek_down')) { 
$this.toggleClass('peek_down').toggleClass('bob_down'); 
} 
else{ 
$this.toggleClass('close_up'); 
} 
});

bob_down降低了div，close_up提高了它（並且在這樣做時遮蔽了peek_up）。這段代碼是我得到的結果。

http://jsfiddle.net/6sQU5/

來源

2014-03-01 Strabismus Design

可以製作[jsFiddle]（http://jsfiddle.net），包括您的HTML，CSS和JS。很難辨別問題到底是什麼。 – Ohgodwhy

我設法讓動畫運行，因爲我打算使用setTimeout函數，但由於某種原因，它似乎並沒有轉化爲的jsfiddle。它在我的瀏覽器中正常工作。

$('#box').on('click', function(){ 
var $this = $(this); 
if ($this.hasClass('peek_down')){ 
    $this.removeClass('peek_down') 
     .addClass('bob_down'); 
} else{ 
    $this.removeClass('bob_down') 
     .addClass('close_up') 
     .addClass('peek_down') 
     setTimeout(function(){ 
    $this.removeClass('close_up')},600); 
} 
});

來源

2014-03-03 15:53:20

檢查Firefox和Chrome後，它工作正常。然而，Safari是一個完全靜態的div。有什麼建議麼？ –

你在做與jQuery或CSS3動畫？通過動畫你是否簡單地切換課程？您需要發佈完整的動畫代碼，以便人們能夠了解您要在此處做什麼。

jQuery animate（）函數能夠添加一個動畫後回調函數，您可以使用它來實現您所需的功能。例如：

$("#box").click(function() { 
    $("#box").animate({ 
     top: "+=100" 
    }, 5000, function() { 
     // Post-animation callback function, add the required code here 
    }); 
});

來源

2014-03-01 00:36:33 tpbapp

動畫是CSS，我只是添加了一個JSFiddle。問題是peek_down動畫在點擊後不可見。 –

它似乎在Firefox中正常工作。這是瀏覽器問題嗎？我可以注意到的唯一事情是，點擊兩次後停止「晃動」，這是你的意思是「模糊」嗎？無論哪種方式，從你的標題我會斷定你是錯誤的方式設置類不會讓你完全控制的CSS動畫，你應該使用jQuery animate（），而不是更好的控制和瀏覽器支持。 – tpbapp

這實際上是我試圖根據需要在不同站點上使用的一組動畫的一部分，因此是CSS。我希望保持一致，即「b」「，即 - b，，放下，提高，擺動，放下，提高。 –

刪除動畫後的類

回答

相關問題