Question

我一直在寻找这个，希望有些专家可以帮助我，因为我发现它很难，我一直在寻找如何做到这一点，但只找到实际的直接颜色，不透明度或图像交换淡化教程.....但没有实际如何在悬停时将一个类淡入另一个类......

例如：

按钮有.btn类....

滚动，它变成：

.btnhover

但是我希望它对新课程有一个很好的温和淡化，而不仅仅是交换（因为这可以很容易地在css中完成）

感谢。

Answer 1

jQuery UI有一个toggleClass方法，可用于从class A到class B制作动画。

toggleClass( class, [duration] )

如果不是，则添加指定的类 present，并删除指定的如果它存在，使用一个可选的过渡。

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

Answer 2

您所谈论的内容称为过渡，这意味着从一个状态顺利地逐渐进入另一个状态，而不是突然和突然。作为替代方案，我建议使用CSS3 Transitions或jQuery animate函数。如果这些替代品能够满足您的要求，请告诉我。

更新： jQuery本身没有这种能力。但是jQueryUI扩展了jQuery的animate方法，这样你就可以顺利地从一个CSS类转换到另一个CSS类。 Here是您可以找到的地方。

更新

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

Answer 3

这可以使用animate()完成 - 您需要使用jquery API才能使用此功能。非常简单 - 只需在悬停时更改要更改的类的属性。

http://api.jquery.com/animate/

Answer 4

我认为Jquery UI插件允许在类之间进行动画。可能值得检查一下：

Jquery UI Animate

Answer 5

取决于类的复杂程度（如果它有背景中的图像，不同的字体类型等）。我认为你可以实现这种效果的方法是复制元素，留下一个隐藏然后使用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>

jQuery：从一个类到另一个类的简单淡入淡出按钮？

5 个答案: