jquery-ui switchClass（）不能按預期工作

Question

我無法像在jquery站點上的示例中那樣使switchClass函數很好地淡出。 基本上，時間安排似乎沒有任何影響，我嘗試從40000-4開始嘗試，但沒有任何區別。

我在下面貼了一個小提琴（解釋得更好），但這是我正在使用的代碼。 有兩個用於切換類的div，因此背景圖片不同。 我為每個div使用不同的方法，但是即使一個使用switchClass，另一個使用addClass，它們都給出完全相同的結果。

$(document).ready(function() {
    $('.iamatrainer').hover(function(){
        $(this).switchClass('iamatrainer', 'iamatrainerhover', 400, 'easeInOutQuad');
        }, function(){
            $(this).switchClass('iamatrainerhover', 'iamatrainer', 400, 'easeInOutQuad');
    });
    $('.iusetrainer').hover(function(){
        $(this).addClass('iusetrainerhover', 400);
        }, function(){
            $(this).removeClass('iusetrainerhover', 400);
    });
});

http://jsfiddle.net/KJbA8/

誰能幫我嗎？

Answer 1

您確定您已加載jQueryUI嗎？ switchClass方法不是jQuery的一部分。 您的小提琴正在拋出JS控制台錯誤。

您實際上不需要JS。 只需在.iamatrainer和.iusetrainer元素上設置:hover就可以了。 http://jsfiddle.net/y3ALr/3/

另外，如果您必須使用背景圖片...

1. 確保您正在使用一些合理使用的圖像替換技術
2. 考慮使用sprites和：hover偏移量，這樣您就不會感到討厭的延遲。

Answer 2

您可以使用:hover偽選擇器和css transitions

CSS：

.iamatrainer{
    background:url(http://renegadeox.com/iamatrainer.png);
    height:70px;
    width:512px;
    transition: background 0.3s linear;
}

.iamatrainer:hover{
    background:url(http://renegadeox.com/iamatrainerhover.png);
    height:70px;
    width:512px;
    transition: background 0.3s linear;
}

這是您更新的演示 。

另外，最好將圖像合並為一個，並將background-position用於:hover狀態