jquery - .mouseleave（）イベントで不透明度が変更されないのはなぜですか？

Question

次のコードでは、部分は正常に機能しますが.mouseover()、部分がトリガーされると、いくつかの面白いことが起こり.mouseleave()ます。1つは、の不透明度が'.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()これは、不透明度の問題が、イベントトリガーを誤用したことの症状である可能性があることを意味しているようです。私は何が間違っているのですか？これを行うためのより良い方法はありますか？

読んでくれてありがとう！