JQuery动画-延迟问题

我有一个网站：

几乎每件事都很顺利，除了一件让人讨厌的事——延迟。若你们点击Rossman菜单项，然后用“zamknij”图标将其关闭，然后立即尝试点击另一个菜单项。您会注意到1-2秒的延迟。我不知道这个问题的原因是什么。这在所有浏览器中都会发生。有人能帮忙吗

问候,，

---

David

不完全确定这是否是您的问题，但请尝试在对所有正在设置动画的元素执行

animate（）

之前调用

stop（）

。大概是这样的：

$(window).load(function() {
  mCustomScrollbars();
  $(function(){
    $("ul#menu a").click(function() {
      myId = this.id;
      $('.text').stop();
      $("ul#menu, h1#logo").stop().animate({left: '-=572'}, 500, function() {
        $("#lang").css("display", "none");
        $("#"+myId+"pr").stop().animate({left: 0}, 200);
        if(myId == "dojazd") {
          $("#outer-mapka").css("left", "50%").css("margin-left", "-213px");
        } else {
          api.goTo(myId.charAt(myId.length-1));
        }
      });
    });
    $("a.close").click(function() {
      api.goTo(1); 
      $(".text").stop().animate({left: "-=950"}, 200, function() { 
        $(".text, #outer-mapka").css("left", "-950px");
        $("ul#menu, h1#logo").stop().animate({left: '0'}, 500, function() {} );
        $("#lang").css("display", "block");
      });
    });
  });
});

---

不完全确定这是否是您的问题，但请尝试在对所有正在设置动画的元素执行

animate（）

之前调用

stop（）

。大概是这样的：

$(window).load(function() {
  mCustomScrollbars();
  $(function(){
    $("ul#menu a").click(function() {
      myId = this.id;
      $('.text').stop();
      $("ul#menu, h1#logo").stop().animate({left: '-=572'}, 500, function() {
        $("#lang").css("display", "none");
        $("#"+myId+"pr").stop().animate({left: 0}, 200);
        if(myId == "dojazd") {
          $("#outer-mapka").css("left", "50%").css("margin-left", "-213px");
        } else {
          api.goTo(myId.charAt(myId.length-1));
        }
      });
    });
    $("a.close").click(function() {
      api.goTo(1); 
      $(".text").stop().animate({left: "-=950"}, 200, function() { 
        $(".text, #outer-mapka").css("left", "-950px");
        $("ul#menu, h1#logo").stop().animate({left: '0'}, 500, function() {} );
        $("#lang").css("display", "block");
      });
    });
  });
});

在

animate（）

之前添加

stop（）

可以解决问题，但了解问题的根源可能是值得的

在这种情况下，用户观察到动画中的延迟，因为在它之前的队列中有多个动画

队列的一个参与者正在备份，因为动画函数complete调用对每个动画元素执行一次，而不是对整个动画执行一次。在下面的示例中，调用两次完整调用，然后调用另一个动画，导致4个动画进入队列

例如：

$("ul#menu a").click(function() {
  myId = this.id;
  $("ul#menu, h1#logo").animate({left: '-=572'}, 500, function() {
    // This code will run twice, once when ul#menu finishes animating
    // and once when h1#logo finishes animating.  Is this the desired
    // behavior?  Is it safe to call api.goTo() twice?       
    $("#lang").css("display", "none");
    $("#"+myId+"pr").animate({left: 0}, 200);

    if(myId == "dojazd") {
      $("#outer-mapka").css("left", "50%").css("margin-left", "-213px");
    }
    else {      
      api.goTo(myId.charAt(myId.length-1));      
    }  
  });
});

队列备份的另一个贡献者，也是主要贡献者，是因为一个通用选择器。在下面的示例中，单击关闭的链接时，会使所有7个文本类都设置动画，当它们完成时，会再设置2个动画。产生21个动画：

$("a.close").click(function() {
  api.goTo(1);
  // The .text selector matches seven different elements.  Thus, a when
  // clicking the close link, seven animations are added to the queue.
  $(".text").animate({left: "-=950"}, 200, function() { 
    $(".text, #outer-mapka").css("left", "-950px");
    // And two more animations are added to the queue.
    $("ul#menu, h1#logo").animate({left: '0'}, 500, function() {} ); 
    $("#lang").css("display", "block");
  });
});

因此，当您单击菜单，关闭页面，然后再次单击菜单时，可以观察到等待21个动画通过队列的延迟

要解决这个问题，可以使用一个标志来指示是否应该运行完整的函数。此外，在选择器上更加具体有助于防止不必要的调用。以下是一个可能的解决方案，实现了以下两个方面：

$(window).load(function() {
  mCustomScrollbars();
  $(function(){         
    var menu_visible=true; // Flag to indicate if menu is visible.
    $("ul#menu a").click(function() {
      myId = this.id;      
      $("ul#menu, h1#logo").animate({left: '-=572'}, 500, function() {
          // If the menu is not visible, then return as this function has
          // already ran.
          if (!menu_visible) return;

          // Will be hiding the menu, so set the flag to false.
          menu_visible = false;

          $("#lang").css("display", "none");
          $("#"+myId+"pr").animate({left: 0}, 200);

          if(myId == "dojazd") {
            $("#outer-mapka").css("left", "50%").css("margin-left", "-213px");
          }
          else {          
            api.goTo(myId.charAt(myId.length-1));          
          }
        });
    });

    // For each text class.
    $(".text").each(function() {
      // Store a handle to the text.
      var $text=$(this);
      // Add a click event to a close link within the text.
      $("a.close", $text).click(function() {
        api.goTo(1); 
        // Only animate the text containing the close link.
        $text.animate({left: "-=950"}, 200, function() { 
          $(".text, #outer-mapka").css("left", "-950px");
          $("ul#menu, h1#logo").animate({left: '0'}, 500, function() {
            // The menu is visible so set the flag.
            menu_visible=true;
          }) ;
          $("#lang").css("display", "block");
        });
      });
    });  
  });
});

在

animate（）

之前添加

stop（）

可以解决问题，但了解问题的根源可能是值得的

在这种情况下，用户观察到动画中的延迟，因为在它之前的队列中有多个动画

队列的一个参与者正在备份，因为动画函数complete调用对每个动画元素执行一次，而不是对整个动画执行一次。在下面的示例中，调用两次完整调用，然后调用另一个动画，导致4个动画进入队列

例如：

$("ul#menu a").click(function() {
  myId = this.id;
  $("ul#menu, h1#logo").animate({left: '-=572'}, 500, function() {
    // This code will run twice, once when ul#menu finishes animating
    // and once when h1#logo finishes animating.  Is this the desired
    // behavior?  Is it safe to call api.goTo() twice?       
    $("#lang").css("display", "none");
    $("#"+myId+"pr").animate({left: 0}, 200);

    if(myId == "dojazd") {
      $("#outer-mapka").css("left", "50%").css("margin-left", "-213px");
    }
    else {      
      api.goTo(myId.charAt(myId.length-1));      
    }  
  });
});

队列备份的另一个贡献者，也是主要贡献者，是因为一个通用选择器。在下面的示例中，单击关闭的链接时，会使所有7个文本类都设置动画，当它们完成时，会再设置2个动画。产生21个动画：

$("a.close").click(function() {
  api.goTo(1);
  // The .text selector matches seven different elements.  Thus, a when
  // clicking the close link, seven animations are added to the queue.
  $(".text").animate({left: "-=950"}, 200, function() { 
    $(".text, #outer-mapka").css("left", "-950px");
    // And two more animations are added to the queue.
    $("ul#menu, h1#logo").animate({left: '0'}, 500, function() {} ); 
    $("#lang").css("display", "block");
  });
});

因此，当您单击菜单，关闭页面，然后再次单击菜单时，可以观察到等待21个动画通过队列的延迟

要解决这个问题，可以使用一个标志来指示是否应该运行完整的函数。此外，在选择器上更加具体有助于防止不必要的调用。以下是一个可能的解决方案，实现了以下两个方面：

$(window).load(function() {
  mCustomScrollbars();
  $(function(){         
    var menu_visible=true; // Flag to indicate if menu is visible.
    $("ul#menu a").click(function() {
      myId = this.id;      
      $("ul#menu, h1#logo").animate({left: '-=572'}, 500, function() {
          // If the menu is not visible, then return as this function has
          // already ran.
          if (!menu_visible) return;

          // Will be hiding the menu, so set the flag to false.
          menu_visible = false;

          $("#lang").css("display", "none");
          $("#"+myId+"pr").animate({left: 0}, 200);

          if(myId == "dojazd") {
            $("#outer-mapka").css("left", "50%").css("margin-left", "-213px");
          }
          else {          
            api.goTo(myId.charAt(myId.length-1));          
          }
        });
    });

    // For each text class.
    $(".text").each(function() {
      // Store a handle to the text.
      var $text=$(this);
      // Add a click event to a close link within the text.
      $("a.close", $text).click(function() {
        api.goTo(1); 
        // Only animate the text containing the close link.
        $text.animate({left: "-=950"}, 200, function() { 
          $(".text, #outer-mapka").css("left", "-950px");
          $("ul#menu, h1#logo").animate({left: '0'}, 500, function() {
            // The menu is visible so set the flag.
            menu_visible=true;
          }) ;
          $("#lang").css("display", "block");
        });
      });
    });  
  });
});

---

另一件恼人的事情是，即使导航是在动画中，语言图标仍然保持不变；）另一件恼人的事情是，即使导航是在动画中，语言图标仍然保持不变；）