jQuery：從一個類到另一個類的簡單淡入淡出按鈕？

我一直在尋找這個，希望你們中的一些專家可以幫助我，因爲我發現它很困難，我一直在尋找如何做到這一點，但只找到實際的直接顏色，不透明或圖像交換褪色教程.....但沒有實際如何褪色一個類上懸停另一個類...jQuery：從一個類到另一個類的簡單淡入淡出按鈕？

例如：

按鈕已經.btn類....

側翻，它變成：

.btnhover

但我希望它有一個很好的溫和的淡入淡出的新類，不只是交換（因爲這可以輕鬆地在CSS中完成）

謝謝。

來源

2011-07-08 CodeyMonkey

jQuery用戶界面具有toggleClass方法，該方法可用於從動畫到class Aclass B。

toggleClass(class, [duration])

添加指定的類，如果它不是存在，並且刪除指定類（如果存在），使用可選過渡。

http://jqueryui.com/demos/toggleClass/

來源

2011-07-08 10:58:07 Niklas

什麼你談論的是被稱爲過渡，這意味着從一個狀態去到另一個狀態平穩，隨着時間的推移，不會突然和突然。作爲替代方案，我建議使用CSS3 Transitions或jQuery animate函數。請讓我知道如果這些替代品可以滿足您的要求。

更新： jQuery本身不具備此功能。但jQueryUI擴展了jQuery的動畫方法，以便您可以順利地將從一個CSS類轉換到另一個CSS類。 Here是你可以找到它的地方。

更新：

var button = $('#button'); 
button.hover(function(){ 
    button.switchClass('ordinary', 'hovered', 1000);  
}, function(){ 
    button.switchClass('hovered', 'ordinary', 1000); 
});

來源

2011-07-08 10:57:12

嗨，我肯定會喜歡使用jquery，但需要一個工作示例請儘可能？ – CodeyMonkey

查看更新:) –

我明白了，好吧......這很有道理，但是..大聲笑（對不起） - 我想添加什麼：hover類，例如.btn> .btn：懸停？ – CodeyMonkey

這可以用animate()做 - 你需要使用jQuery的API，以便能夠使用此功能。非常簡單 - 只需要在懸停時更改類的屬性即可。

來源

2011-07-08 10:57:33 easwee

我覺得jQuery UI的插件，允許類之間的動畫。這可能是值得檢查出：

Jquery UI Animate

來源

2011-07-08 10:59:11

根據多麼複雜的類（如果它在背景圖片，不同的字體類型，等..）我覺得這樣就可以達到這樣的效果是通過複製元素，讓一個隱藏，然後使用fadeIn和fadeOut效果。

這可能是一個例子：

<div id="button"> 
    <div class="normal"> 
    Your element 
    </div> 
    <div class="hover" style="display:none;"> 
    Your element while hovering 
    </div> 
</div> 

<script type="text/javascript"> 

$("#button").mouseenter(function(){ 
    $("#button.normal").fadeOut();  
    $("#button.hover").fadeIn(); 

}).mouseleave(function(){ 
    $("#button.normal").fadeIn();  
    $("#button.hover").fadeOut(); 

}); 

</script>

來源

2011-07-08 11:02:25 Fgblanch

其實..我不想在頁面上有2個相同的元素，我只是想要切換類... – CodeyMonkey

，這取決於類是多麼複雜（背景中的圖像，不同的字體類型，不同的大小），如果你想要一個平滑過渡這可能是一個很好的選擇，雖然有重複的元素它不是一個好的做法 – Fgblanch

這是一個導航，所以我不想LI重複兩次，我只想切換1個元素上的類 – CodeyMonkey

jQuery：從一個類到另一個類的簡單淡入淡出按鈕？

回答

相關問題