JQuery 悬停效果淡入淡出 - 有帮助吗？

Question

我正在尝试使用 JQuery 实现悬停淡出效果。目前我有一个带有“hov”类的元素受到攻击，如果没有javascript，CSS将简单地改变它在:hover上的颜色。使用 JQuery。

这个想法是在元素滚动时克隆​​它并将其直接放置在前面，剥离它的“hov”类，因此它只是静态的。然后我将其淡出，以创建过渡效果。

不过，我遇到了麻烦，在我从克隆中删除“hov”类后，它仍然表现得好像它仍然存在一样。我可以将鼠标悬停在克隆上，即使它不应该能够通过 hov 定位。有什么想法/技巧吗？

<a href="#" class="hov rounded-50 action-button">Fade Me Out< /a>

$(".hov").mouseover(function() {

    // Clone the current element, remove the "hov" class so it won't trigger same behavior
    // finally layer it infront of current element

    var $overlay = $(this).clone(true).removeClass("hov").insertAfter($(this));

    // Push it to the side just for testing purposes - fade it out

    $overlay.css({left:'300px'}).fadeOut({duration:500, ease:'easeOutQuad'});
});

Answer 1

无需克隆元素，只需淡出原始元素：

$('.hov').mouseenter(function() {
  $(this).fadeOut();
});

// Optionally:
$('.hov').mouseleave(function() {
  $(this).stop(true, true).show();
});

您还可以使用悬停功能：

$('.hov').hover(function(){
  $(this).fadeOut();
},
function(){
  $(this).stop(true, true).show();
});

如果您只想让它部分淡出，您可以为不透明度属性设置动画：

$('.hov').mouseenter(function() {
  $(this).animate({'opacity': 0.5});
});

如果您只想让它脉冲，则返回正常不透明度：

$('.hov').mouseenter(function() {
  $this = $(this);

  $this.animate({'opacity': 0.5}, {
    'complete': function(){
      $this.animate({'opacity': 1});
    }
  });
});

最后，如果您愿意放弃对旧版浏览器的支持，您可以使用 css 来完成这一切：

.hov {
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;   
}
.hov:hover {
  opacity: 0.5;
}