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

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 будет поддерживать его для вас в этом инст ance, если вам нужно объявить новую переменную для объекта в цепочке, обычно вы не делаете это правильно;)

Answer 2

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

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 3

сделать псевдоним для этого с помощью

var _this = this; 

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

Answer 4

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

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 5

два способа:

• кэш 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 6

В функции обратного вызова this JQuery всегда установлен на элемент 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. 
    }); 
});