哈弗淡入，重複

Question

當用戶將鼠標懸停DIV1： -

• DIV1和DIV2的內容淡出
• DIV1載荷div1s一些新的內容
• DIV2變淡現有內容

這是我想要停止的地方。

但是，當div1的新內容加載時，懸停事件再次觸發，並繼續。

如何在首次懸停事件後使懸停事件再次發生，直到用戶移除光標並再次懸停在div1上？

希望這個有道理，提前喝彩！

$('document').ready(function() { 

    //For each small block 
    $('#div1').hover(function() { 

     var thisWish = $(this).html(); 
     var nextWish = $('#wishy1').html(); 

     //Fade the small block out bring in a new wish 
     $(this).fadeOut(1200, function() { 
      $(this).html(nextWish).fadeIn(1200, function() { 

      }); 
     }); 

     //Fade the large block and and bring in the small blocks wish 
     $('#div2').fadeOut(1200, function() { 
      $('#div2').html(thisWish).fadeIn(1200, function() { 

      }); 
     }); 
    }, 
    function() { 
     // hover out 
    }); 
}); 

Answer 1

既然你不使用懸停的第二個事件，使用鼠標懸停代替：

$('document').ready(function(){ 
    //For each small block 
    $('#div1').mouseover(function(){ 
     var thisWish = $(this).html(); 
     var nextWish = $('#wishy1').html(); 
     //Fade the small block out bring in a new wish 
     $(this).fadeOut(1200, function(){ 
      $(this).html(nextWish).fadeIn(1200, function(){ 
      }); 
     }); 
     //Fade the large block and and bring in the small blocks wish 
     $('#div2').fadeOut(1200, function(){ 
      $('#div2').html(thisWish).fadeIn(1200, function(){ 
      }); 
     }); 
    } 

})