Question

在下面的代码中，.mouseover()部分工作正常，但在触发.mouseleave()部分时会发生一些有趣的事情。例如，'.step_details'的不透明度未重置。我尝试使用.animate()和.css()将不透明度重置为0但没有成功。有关为什么会这样的想法吗？

$('.step').mouseover(function() {
    $(this).css({'border': 'solid #CCC 1px', 'background-color': '#FFF'})
        .animate({'margin-top': '0', height: '300px'}, 500);
    $(this).children('.step_details').css('display', 'block')
        .animate({opacity: 1},700); 
})

$('.step').mouseleave(function() {
    $(this).css({'border': 'none', 'background-color': 'inherit'})
        .animate({'margin-top': '150px', height: '150px'}, 200);
    $(this).children('.step_details').css({'display': 'none', 'opacity': 0});
})

此外，重置边框/背景和重置上边距和'.step'高度的动画开始之间存在不一致的延迟。这似乎意味着不透明度问题可能只是我滥用.mouseleave()事件触发器的一个症状。我究竟做错了什么？我有更好的方法吗？

感谢阅读！

Answer 1

http://jsfiddle.net/DXgr8/1/

你错过了.stop()

$('.step').mouseenter(function() {
    $(this).css({border: 'solid #CCC 1px', backgroundColor: '#FFF'})
        .stop().animate({marginTop: '0', height: '300px'}, 500);
    $(this).children('.step_details').stop().animate({opacity: 1},700); 
}).mouseleave(function() {
    $(this).css({border: 'none', backgroundColor: 'inherit'})
        .stop().animate({marginTop: '150px', height: '150px'}, 200);
    $(this).children('.step_details').stop().animate({opacity: 0},200);
});

NB有人测试这个，div隐藏但仍然在那里盘旋，只是比它更低

Answer 2

不透明度不会改变，因为动画设置display:none这是一个二元开关，不显示该元素，不会看到任何不透明度的变化。但是，fadeIn和fadeOut是您正在做的事情的好方法。

demo jsfiddle

$('.step').hover(function() { // mouse enter

  $(this).animate({
      'margin-top': '0', 
      height: '300px'
  }, 500).children('.step_details').fadeIn(700);

}, function() { // mouse leave

  $(this).animate({
    'margin-top': '150px', 
    height: '150px'
  }, 200).children('.step_details').fadeOut(200);

});

可以使用:hover伪类

在CSS中处理边框/背景更改

.step {
  margin-top:150px;
  border:none;
  background-color:#eee;
}
.step:hover {
  border:solid #CCC 1px;
  background-color:#fff;
}

为什么不会在.mouseleave（）事件上改变不透明度？

2 个答案: