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：从一个类到另一个类的简单淡入淡出按钮？

回答

相关问题