爲什麼不在.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（）事件上改變不透明度？

回答

相關問題