Question

我需要以下方面的帮助：

我正在制作一个jQuery脚本来动画菜单。这就是我需要的;当我单击菜单按钮时，菜单项出现并向侧面滑动，退出时菜单则相反。我尝试使用每个（）滑动一个，第一次单击它工作正常，但第二个（退出单击）它没有做任何事情。

我做错了什么？

这是我的代码：

/* Menu Hamburguer Toggle */
 jQuery ('#fechado').click( function() { 
                     jQuery('#aberto').fadeIn(); 
                    jQuery('#fechado').fadeOut(); 
                    /*jQuery('.main-navigation').fadeIn();*/
                    jQuery('.main-navigation').animate({
                            right:"50%",
                            opacity: "show"
                            }, 500       
                            );
                    /* animação menu principal */
                    var delay = 0;
                   jQuery('.menu-item:lt(16)').each(function(){ 
                       jQuery(this).delay(delay).animate({
                           left:'+=200'
                       },500);
                       delay += 100;
                 
                    });
    return false;
 }); 
 
 
 
 jQuery ('#aberto').click( function() { 
    jQuery('#aberto').fadeOut(); 
    jQuery('#fechado').fadeIn(); 
    jQuery('.main-navigation').animate({
                            left:"0%",
                            opacity: "hide"
                            }, 500       
                            ); 
                    /* animação menu principal */
                    var delay = 0;
                   jQuery('.menu-item:lt(16)').each(function(){ 
                       jQuery(this).delay(delay).animate({
                           right:'+=200'
                       },500);
                       delay += 100;
                       
                    });  
                    return false;
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

jquery animate正在定义＆＃39; left＆＃39;并且＆＃39;对＆＃39; inline-css可能导致冲突。相反，尝试：

 var delay = 0;
 jQuery('.menu-item:lt(16)').each(function(){ 
    jQuery(this).delay(delay).animate({
        left:'-=200'
         },500);
    delay += 100;
  });

所以你只是调整了左边的＆＃39;属性。

对于稍强一些的jquery，你也可以考虑使用：

 //    var delay = 0;     - this line no longer needed
 jQuery('.menu-item:lt(16)').each(function(i){    // using i as a counter
    jQuery(this).stop(true, false).delay((i + 1) * 100).animate({
        left:'-=200'
         },500);
  //  delay += 100;   - this line no longer necessary 
  });

这里我们正在增加＆＃39; i＆＃39;计数器乘以100得到时间增量，不需要设置另一个变量（延迟）。我们还使用stop(true,false)来中断div上的任何活动动画。这应该为用户提供更具响应性的体验，如果他们在按钮之间点击，同时它仍然可以从之前的点击动画。

JQuery each（）第二次不工作

1 个答案: