將Fade合並到addClass jQuery中

Question

我有這個簡單的代碼：

$('.featureItems li').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

我如何結合淡入淡出效果，因此添加/刪除類更加漸進？

我需要animate（）嗎？

謝謝

Answer 1

如果您還在使用jQuery UI，它會改進CSS添加/刪除方法，以便它們接受第二個參數，該參數是設置CSS轉換動畫的延遲（以毫秒為單位）。 要將變化設置為半秒的動畫，例如：

$('.featureItems li').hover(
   function(){ $(this).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)

更新：

為了防止動畫隊列在快速懸停/輸出序列期間卡住或不一致，您還可以在啟動add / removeClass之前強制停止現有動畫：

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).stop(true).removeClass('hover', 500) }
)

Answer 2

繼@Dave Ward的回答之后，還有一個獨立的插件可以在你不想使用jQuery UI的情況下執行此操作。

Answer 3

除了@Dave Ward的回答之外，我還必須刪除removeClass stop(true)的stop(true)部分，否則在第一次mouseover / mouseout后，mouseover部分停止工作：

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)

Answer 4

另一個非JavaScript的替代方法是在CSS中更改： .featureItems li以具有以下屬性：

.featureItems li {
    transition: transform 1s, background-color 1s;
    -moz-transition: -moz-transform 1s, background-color 1s;
    -webkit-transition: -webkit-transform 1s, background-color 1s;
    -o-transition: -o-transform 1s, background-color 1s;
}

然后，讓CSS3在您在.hover中.hover任何更改之間進行.hover ，例如：

.hover {
    background-color: #DDD;
    transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -webkit-transform:scale(1.1,1.1);
    -o-transform:scale(1.1,1.1);
}

你可以在這里找到更多關於CSS3 Transitions的信息：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions