0

在下面的代码中，部分工作正常，但是当部分被触发.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()事件触发器的症状。我究竟做错了什么？我应该这样做有更好的方法吗？

谢谢阅读！

4

2 回答 2

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

注意任何测试这个的人，div 隐藏但仍然悬停在那里，只是比它更向下

于 2013-01-06T06:10:17.050 回答
0

不透明度不会改变，因为动画设置display:none为不显示该元素的二进制开关，因此不会看到任何不透明度变化。但是，fadeIn并且fadeOut是您正在做的事情的一个很好的解决方案。

演示 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;
}
于 2013-01-06T06:27:19.487 回答