Как передать $ (this) ссылку на функцию обратного вызова?

Question

На моей веб-странице есть следующие анимации:

     $(".anim-item").not(this).animate({
        opacity: 0,
     }, { queue: true, duration: 1000 } , function() {
        // Animation complete.
     });

     $(this).animate({
        left: 200,
     }, { queue: true, duration: 1000 } , function() {
        // Animation complete.
     });

В настоящее время обе анимации работают одновременноЯ хочу, чтобы вторая анимация запускалась после первой.Я попытался поместить второй в функцию обратного вызова, но не могу найти способ заставить ссылку $ (this) работать.Есть идеи, как заставить это работать?

Заранее спасибо.

Answer 1

Ваша функция неверна , если вы объявляете параметры, обратный вызов переходит в объект параметров:

$(".anim-item").animate({
   opacity: 1,
}, {duration: 1000, queue: true, complete: function() {
   $(this).animate({
      left: 200,
   }, { queue: true, duration: 1000, complete: function() {
      // Animation complete.
   }});
}});

Кроме того, не создавайте глобальную переменную, содержащую элементэто просто напрашивается на неприятности, тем более что jquery будет поддерживать его для вас в этом случае, если вам нужно объявить новую переменную для объекта в цепочке, обычно вы делаете это неправильно;)

Answer 2

Два способа:

• кеш this в локальной переменной перед вызовом .animate()
• используйте .proxy(), чтобы передать this ссылку на .animate()

пример 1:

var func = function(){
   var self = this;

   $(".anim-item").not(this).animate({
     opacity: 0,
     }, { queue: true, duration: 1000 } , function() {
        self.animate({});
     });
};

пример 2:

var func = function(){
   $.proxy($(".anim-item").not(this).animate({
   }), this);
};

Answer 3

Сохраните его под другим именем, например:

 var myThis = this;
 $(".anim-item").not(this).animate({
    opacity: 0,
 }, { queue: true, duration: 1000 } , function() {
    $(myThis).animate({
       left: 200,
    }, { queue: true, duration: 1000 } , function() {
       // Animation complete.
    });
 });

Закрытие внутренней функции обеспечит ее видимость.

Answer 4

В функции обратного вызова jQuery this всегда установлен на элемент DOM, к которому применяется функция.

Если вы хотите получить доступ к this в первой функции обратного вызова, вам нужно создать ссылку на нее, прежде чем анимировать:

 var self = this;
 $(".anim-item").not(this).animate({
    opacity: 0,
 }, { queue: true, duration: 1000 } , function() {
    $(self).animate({
        left: 200,
     }, { queue: true, duration: 1000 } , function() {
        // Animation complete.
     });
 });

Answer 5

Сохраните это в локальной переменной.

var _this = this;

$(".anim-item").not(this).animate({
        opacity: 0,
    }, { queue: true, duration: 1000 } , function() {
        // Animation complete. Next animation
        $(_this).animate({
            left: 200,
        }, { queue: true, duration: 1000 } , function() {
            // Animation complete.
        });
    }
);

Answer 6

Создайте псевдоним для этого через

var _this = this;

Если вы пишете запрос jQuery $('.abc') и используете такие функции, как click, hover и т. Д., this всегда будет ссылаться на текущий узел DOM, который обрабатывает jQuery.