在IE上的jquery mouseleave自動填充

Question

我有這個代碼的問題，mouseleave函數在IE中觸發，而沒有鼠標首先進入div。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#<?php echo 'div_'.$reload_cont; ?>').mouseenter(function() { 

     var el = $(this); 
     var timeoutId = setTimeout(function() { 
      $('#<?php echo 'relo_'.$reload_cont; ?>').animate({opacity: 1}, 'slow'); 
     }, 500); 

     el.mouseleave(function() { 
      clearTimeout(timeoutId); 
      $('#<?php echo 'relo_'.$reload_cont; ?>').animate({opacity: 0}, 'slow'); 
     }); 
    }); 
}); 

</script> 

我試了很多方法，似乎都沒有工作。

這裏任何幫助

Answer 1

您重新綁定mouseleave事件的每次的mouseenter事件觸發，嘗試移動mouseleave事件處理mouseenter事件處理程序之外：

$(function() { 

    //notice the timeout variable is saved in a scope where both event handlers can access it 
    var timeoutId; 

    $('#<?php echo 'div_'.$reload_cont; ?>').mouseenter(function() { 

     timeoutId = setTimeout(function() { 
      $('#<?php echo 'relo_'.$reload_cont; ?>').stop().animate({opacity: 1}, 'slow'); 
     }, 500); 
    }).mouseleave(function() { 
     clearTimeout(timeoutId); 
     $('#<?php echo 'relo_'.$reload_cont; ?>').stop().animate({opacity: 0}, 'slow'); 
    }); 
}); 

注意使用.stop()，所以如果你用鼠標進入，然後鼠標快速離開很多次，那麼多個動畫不會排隊。

這裏是一個演示：http://jsfiddle.net/jasper/LJAqd/

我在IE 8/7測試這和它的工作如預期，但我不能肯定它會爲你執行工作，因爲我不知道HTML結構的代碼。