jquery在Mouseleave上停止fadeOut動畫

有沒有辦法在jQuery中停止mouseleave上的動畫？我希望腳本一樣工作：jquery在Mouseleave上停止fadeOut動畫

1：當用戶鼠標移到文本，顯示出一個div
2：當用戶鼠標移出文本的隱藏的div，但如果用戶容器而不是將鼠標懸停在，div必須繼續顯示！

這是我在工作：

$(document).ready(function(){  
    $('.this').hover(function(){ 
     $('#container').fadeIn(200); 
    }).mouseleave(function(){ 
     setTimeout(function() { 
     $('#container').fadeOut(200); 
    }, 1000); 
    }) 

    $('#container').hover(function(){ 
     $('#container').stop().show(); 
    }) 

});

Fiddle

來源

2013-03-22 simon

爲什麼你有setTimeout？你想在mouseleave上延遲淡入淡出？ – Lowkase 2013-03-22 12:25:59

如果容器淡出，那麼它將如何獲得懸停事件？ – Jai 2013-03-22 12:26:30

Jai->這是一個很好的問題。什麼是最好的方式來做到這一點？：P – simon 2013-03-22 12:29:52

喜歡這個？ http://jsfiddle.net/y36ta/6/

var $container = $('#container'); 

$('.this').on('mouseover', function(){ 
    $container.stop(true).fadeIn(200); 
}).on('mouseleave', function(){ 
    $container.stop(true).delay(200).fadeOut(200); 
}) 

$container.on('mouseenter', function(){ 
    $(this).stop(true).clearQueue().show(); 
}).on('mouseleave', function() { 
    $(this).delay(200).fadeOut(200); 
});

更新：使用.on()綁定處理程序。

來源

2013-03-22 12:53:51 Simon

正是我在找什麼，非常感謝:-) – simon 2013-03-22 13:07:33

試試這個：

$(document).ready(function() { 
    $('.this').hover(function() { 
     $('#container').fadeIn(200); 
    }); 
    $('.this').mouseleave(function (e) { 
     setTimeout(function() { 
      if ($('#container:hover').length != 1) $('#container').fadeOut(200); 
     }, 1000); 
    }); 
});

DEMO

來源

2013-03-22 12:41:20 Anujith

Heres a jsfiddle。檢查出來，我認爲這是你需要的。

$(document).ready(function() { 
    $('a').hover(function() { 
      $('.this').stop().fadeTo(200, 1, function(){ 
       $('.this').fadeTo(800, 0.1); 
      }); 
    }, function() { 
      $('.this').stop().fadeTo(200, 0.1); 
    }); 
});

希望它有助於

來源

2013-03-22 12:43:39 Todd

jquery在Mouseleave上停止fadeOut動畫

回答

相關問題