jquery - Jquery - 正方形褪色并回来

Question

我的一些方块有点问题。它们应该在用户鼠标悬停时消失，然后在鼠标移出时恢复正常的不透明度。问题是当我鼠标移出时它们不会恢复到正常的不透明度。我该如何解决？

<div class="test"></div>

$('.test').each(function(){
    $(this).animate({'opacity': '1.0'}, 500);
    $(this).hover(function(){    
        $(this).stop(1).animate({'opacity': '1.0'}, 500);    
    }, function(){    
        $(this).stop(1).animate({'opacity': '0.6'}, 500)     // at the end of animation
    });
});

我做了一个JS Bin

任何帮助/教程将不胜感激。

Answer 1

你只是混淆了淡入淡出的顺序。

$(this).hover(function(){    
    $(this).stop(1).animate({'opacity': '0.6'}, 500)     // hover over        
}, function(){    
    $(this).stop(1).animate({'opacity': '1.0'}, 500);    // hover out
});

从文档中查看函数签名

hover( handlerIn(eventObject) , handlerOut(eventObject)  )

第一个函数用于鼠标进入元素，第二个函数用于鼠标离开元素。

Answer 2

更简单的解决方案

$('.test').hover(function() {
    $(this).stop().fadeTo(500, 1);
}, function() {
    $(this).stop().fadeTo(500, 0.6);
});​

小提琴http://jsfiddle.net/5R8Y9/

Answer 3

你在找这样的东西吗？http://jsfiddle.net/wKApE/

$('.test').mouseenter(function(event){
  $(event.target).addClass('active');  
  $('.test').each(function(){
    if(!$(this).hasClass('active'))
    {
      $(this).stop(1).animate({'opacity': '0.6'}, 500); 
    }
  });
});
$('.test').mouseleave(function(event){
  $(event.target).removeClass('active');
  $('.test').each(function(){
  $(this).stop(1).animate({'opacity': '1'}, 500);
  });
});​