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
});

查看documentation

中的功能签名

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);
  });
});

Jquery - Squares淡出并回归

3 个答案: