JQuery animate - задержка выдачи - PullRequest
Новая
       10

JQuery animate - задержка выдачи

1 голос
/ 07 декабря 2011

У меня есть этот сайт:

http://p33.yamandi.com/

Почти все работает нормально, кроме одной маленькой раздражающей вещи - задержки. Если вы щелкнете по пункту меню Россмана, закройте его с помощью значка «замкни» и попробуйте сразу щелкнуть другой пункт меню. Вы заметите задержку 1-2 секунды. Я понятия не имею, что является причиной этой проблемы. Это происходит во всех браузерах. Кто-нибудь может помочь?

С уважением, David

Ответы [ 2 ]

11 голосов
/ 07 декабря 2011

Не совсем уверен, что это ваша проблема, но попробуйте вызвать stop() до animate() для всех элементов, которые вы анимируете.Как то так: 

$(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");
      });
    });
  });
});
5 голосов
/ 07 декабря 2011

Хотя добавление stop() до animate() решит проблему, возможно, стоит понять источник проблемы.

В этом случае пользователь наблюдает задержку анимации, поскольку несколько анимацийв очереди перед ним.

Один участник в резервном копировании очереди, потому что вызов завершения функции анимации выполняется один раз для анимированного элемента, а не один раз для анимации в целом.В следующем примере полный вызов вызывается дважды, что, в свою очередь, вызывает другую анимацию, в результате чего в очередь входят 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");
        });
      });
    });  
  });
});
...