非常快速的jQuery悬停交互重置

Question

我正在使用以下代码来交换<div>内容。除了盒子的mousein和mouseout行为外，它的功能正常，显示错误的行为。类名“翻转”的显示集等于无。我应该检查状态，使用setTimeout（）或其他方法来防止这种行为吗？

html

<div class="videobox">
        <div class="unflipped">
            <img src="videoprop.jpg">
            <div class="desc_over">This is a description! Video Contains This!</div>
        </div>
        <div class="flipped">This what displays when flipped 1!</div>
    </div>

jQuery

$(".videobox").hover(function(){
            $(this).children(".unflipped:first").fadeOut("fast",function(){
                $(this).next(".flipped:first").fadeIn("fast");
            });         
        },function(){           
            $(this).children(".flipped:first").fadeOut("fast",function(){
                $(this).prev(".unflipped").fadeIn("fast");
            }); 
        });

Answer 1

尝试将它们分开：

$('.videobox').find('.unflipped').mouseenter(function() {
    $(this).fadeOut("fast", function() {
        $(this).next(".flipped").fadeIn("fast");
    });
});
$('.videobox').find('.flipped').mouseleave(function() {
    $(this).fadeOut("fast", function() {
        $(this).prev(".unflipped").fadeIn("fast");
    });
});