JQuery 淡入 Hover 效果 - 帮助？

Question

I'm trying to achieve a fade-on-hover effect with JQuery. Currently I have an element with a "hov" class attacked to it, without javascript the css will simply change it's color on:hover. With JQuery.

The idea is to clone the element as it's rolled over and place it directly infront, stripping it of the "hov" class so it's just static. Then I fade it out so it create the transition effect.

I'm having trouble though, after I strip the "hov" class from the clone, it KEEPS acting as though its still there. I can mouse over the clone even though it shouldn't be able to be targeted through hov. Any ideas / tips?

<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

No need to clone the element, just fade the original element:

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

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

You can also use the hover function:

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

If you just want it to partially fade, you can animate the opacity property:

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

If you just want it to pulse, then return to normal opacity:

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

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

Finally, if your willing to forgo support of older browsers, you can do it all with css:

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