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结构。

在IE上使用Jquery mouseleave autofires

1 个答案: