Question

我有几个div在传递鼠标时动画：

<div class="ivideo">
<a href="#">
<img src="default01.jpg" width="190" height="142" />                
</a>
</div>

<div class="ivideo">
<a href="#">
<img src="default02.jpg" width="190" height="142" />                
</a>
</div>

<div class="ivideo">
<a href="#">
<img src="default03.jpg" width="190" height="142" />                
</a>
</div>

我在这种情况下使用hoverIntent jquery插件：

var configVideo = {
                sensitivity: 3,
                interval: 100,
                over: videoOver,
                timeout: 200,
                out: videoOut
            };

    $(".ivideo").hoverIntent( configVideo );

    function videoOver(){
        $('img',this).animate({ 
                opacity: 0.3
            }, 100 );

            $('<span><\/span>').appendTo($('a',this));
            $('span',this).fadeIn(100);

    }

    function videoOut(){
            $('img',this).animate({ 
                opacity: 1
            }, 100 );

            $('span',this).fadeOut(100 ,function() {$(this).remove()});
    }

我的问题是所有元素反应良好（当我快速使用鼠标时）但最后一个div总是会失败（总是卡在mouseout事件中）

我的错误是什么？我希望你的帮助。

Answer 1

Look here

实际上所有的元素都会失败，但你会一个接一个地快速测试它们，并在你完成的时候用鼠标停止，对吧？问题是div会自动具有100％的宽度，所以没有办法摆脱你不用你的鼠标下降或退出文档。这就是为什么你需要设置一个固定的宽度或使用另一个元素。

jquery悬停最后一个元素失败

1 个答案: