Jquery 重复和传播功能。滑动分页

嘿，我不知道标题是否是正确的方式来说明我的问题是什么，但我会尝试在这里解释它

所以我的错误是everthyng在开始的几次工作，但是在悬停和离开div之后，它不再工作了，它开始滞后，动画开始10秒甚至更长时间。 我试着用

event.stopPropagation（）

修复它，但没有成功

这里是html

[……]

测试1

[……]

以及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"
                });      
               }
             }                 
             });         

});

$（.box”）.mouseover（函数（事件）{
event.stopPropagation（）；
var attr=$（this.attr（“id”）；
var i=0；
对于（i=1；i

.delay（）方法最适合在排队的jQuery之间进行延迟
因为它是有限的，例如，它不能提供一种
取消延迟-.delay（）不是JavaScript的本机
setTimeout函数，可能更适合某些用途
案例

$( ".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"
                });      
               }
             }                 
             });         

});