一千萬個為什麽

搜索

jQuery UI - addClass removeClass - CSS值被卡住了

我正在嘗試做一個簡單的動畫。

  1. 你展示div。它動畫正確。
  2. 你隱藏了div。正確的。
  3. 你再次展示div。它顯示但沒有動畫。它被卡在你第一次打斷它的時候。

所以在[add | remove]類中發生的插值CSS不知何故被卡在那裏。第二次,[add | remove]類實際上正在運行,但是它從類中設置的css被忽略了(我認為被黯然失色)。如何解決這個問題而不使用.animate和硬編碼的樣式值?重點是將動畫終點放在css類中。

謝謝!

<!DOCTYPE HTML>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('#show').bind({
        click: function() {
            showAndRun()
        }
    })
    $('#hide').bind({
        click: function() {
            $('div').stop(true, false).fadeOut('slow')
        }
    })

    function showAndRun() {
        function pulse() {
            $('div').removeClass('green', 2000, function() {
                $(this).addClass('green', 2000, pulse)
            })
        }
        $('div').stop(true, false).hide().addClass('green').fadeIn('slow', pulse)
    }
})
</script>

<input id="show" type="button" value="show" /><input id="hide" type="button" value="hide" />
<div style="display: none;"></div>

You can also look at what it does here at jsbin

最佳答案

我想出了解決方案。不過我不確定他是否滿意。當點擊 show 時,它本質上是一個非常糟糕的“重置”CSS

動畫永遠循環。所以我不能依賴jQuery隊列(有限長度)。我必須通過回調實現循環,如代碼所示。導致的問題:您不能 .s至p(true,true)。第一個true清除隊列,但在當前正在運行的動畫之後隊列中沒有任何內容。所以這沒用。第二個true跳轉到隊列中的最後一個動畫。再無用,因為我們實際上將繼續留在一個循環的東西。第二個arg必須是 false 才能中斷,否則就是無限循環。

中斷的問題。它將css留在原處。你現在無論你動畫插入的是什麽(在我的例子中是 background-color ),你都會被隨機的css道具所困擾。我也希望中斷是即時的。所以別無他法。

在我的例子中,動畫期間的 background-color 是在 element.style (通過瀏覽器工具中的檢查發現)上設置的,它會覆蓋正在發生的任何其他事情。直到第一個動畫開始運行,這個道具才存在。然後它被打斷了,假定的臨時風格卡在那裏(我猜)。

所以你再次運行動畫。綠色課程已應用。 jQuery計算出要進行的顏色範圍。原來它從#shadeofgreen到#thesameshadeofgreen,因為卡住的 element.styles 值會覆蓋該類提供的任何內容。因此動畫在兩個相同顏色之間滑動。它正在運行!但是沒有顏色可以改變。

所以我的情況下的修復並不可怕,但我仍然不確定我喜歡它,因為我不確定它是否可以輕松應用於各種情況。

更改

$('div').s至p(true, false).hide().addClass('green').fadeIn('slow', pulse)

$('div').s至p(true, false).removeAttr('style').hide().addClass('green').fadeIn('slow', pulse)

關鍵是

.removeAttr('style').hide().addClass('green')

That is essentially your CSS reset. Guaranteed 至 always be there when you need it since it's happening exactly before the thing will get displayed again.

Note that putting !important on the color in the green CSS class, doesn't work, because that (seems 至) will override element.styles (which the jQuery animation uses), and you will not get the desired result.

Of course I am still open 至 suggestions. I probably missed something since I only started looking at CSS and jQuery at the 至p of the week.

您可以在固定代碼此處查看jsbin上的 .removeAttr('style')的效果

轉載註明原文: jQuery UI - addClass removeClass - CSS值被卡住了