重复和传播功能。 jQuery答案

【问题标题】：Repeating and propaganation Function. Jquery重复和传播功能。 jQuery
【发布时间】：2014-04-19 21:07:28
【问题描述】：

嘿，我不知道标题是否能正确表达我的问题，但我会在这里尝试解释一下。

所以我的错误是前几次都可以工作，但是在更频繁地悬停并离开 div 之后，它就不再工作了，它开始滞后 10 秒后开始动画，甚至更多。我尝试用event.stopPropagation() 修复它，但没有奏效。

这里是html

[...]

 <div class="box" id="box_1">
        <div class="content_box hidden" id="cont_1">
            <div class="con" id="con_1">Test1</div>
        </div>
 </div>

[...]

还有 Jquery 代码

$( ".box" ).mouseover(function(event) {
    event.stopPropagation();
    var attr = $( this ).attr("id");
    var i = 0;
    for(i = 1;i<=9;i++){
        if(attr=="box_"+i){
             $('#con_'+i).removeClass('hidden');
             $('#cont_'+i).removeClass('hidden');
             $(this).stop().animate({width: "300px"}, 100);
             $('#cont_'+i).stop().delay(100).animate({width: "250px"},1).animate({height: "400px"},500);
        }
    }
             $(this).delay(100).mouseleave(function(e) { 
              e.stopPropagation();   
              for(var i = 1;i<=9;i++){
               if(attr=="box_"+i){
                $('.con').addClass('hidden');
                $('#cont_'+i).stop().animate({height: "0px"},500).animate({wdith: "0px"});
                $(this).stop().delay(500).animate({
                    width: "50px"
                });      
               }
             }                 
             });         

});

【问题讨论】：

标签： jquery events mouseover mouseleave

【解决方案1】：

来自delay api

.delay() 方法最适合在队列 jQuery 之间进行延迟效果。因为它是有限的——例如，它没有提供一种方法来取消延迟——.delay() 不是 JavaScript 原生的替代品 setTimeout 函数，可能更适合某些用途案例。

【讨论】：