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

在以下代码中，.mouseover()部分可以正常工作，但在.mouseleave()部分被触发时会发生一些有趣的事情。例如，'.step_details'的不透明度未被重置。我试图同时使用.animate()和.css()将不透明度重置为0，但没有成功。任何想法为什么这可能是？为什么不在.mouseleave（）事件上改变不透明度？

$('.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()事件触发器的一个症状。我究竟做错了什么？有更好的方法我应该这样做吗？

感谢您的阅读！

来源

2013-01-06 mattmattmatt

这将是巨大的，如果你可以创建一个最小[小提琴]（被处理http://jsfiddle.net/)/[bin](http://jsbin.com）。 –

尝试。 .mouseout（）代替 – gamehelp16

'.mouseleave（）'很好，.mouseout（）'不会有所作为 – Popnoodles

不透明度赢得”因为动画设置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); 

});

边框/背景的变化可以在CSS中使用:hover伪类

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

来源

2013-01-06 06:27:19 MikeM

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皮，但仍有徘徊，只是再往下比它

来源

2013-01-06 06:10:17 Popnoodles

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

回答

相关问题