在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结构的代码。