非常快的jQuery懸停iteractions重置

Question

我正在使用以下代碼來交換<div>內容。它的功能正常，但盒子的mousein和mouseout行爲除外，這表示錯誤的行爲。類別名稱「flipped」的顯示集等於none。我應該檢查狀態，使用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"); 
    }); 
});