Comment passer la référence $ (this) à une fonction de rappel?

Question

J'ai les animations suivantes dans ma page web:

 $(".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. 
    }); 

Actuellement à la fois les animations sont en cours d'exécution simultanément. Je veux que la deuxième animation soit lancée après la première. J'ai essayé de mettre le second dans la fonction de rappel, mais je n'arrive pas à trouver un moyen de faire fonctionner la référence $ (this). Une idée comment faire fonctionner cela?

Merci d'avance.

Answer 1

Votre fonction est mal, si vous déclarez les options, puis le rappel va dans les options objet:

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

aussi, ne faites pas une variable globale contenant l'élément, qui est juste d'avoir des ennuis, d'autant plus que jquery maintiendra pour vous dans ce inst ance, si vous devez déclarer une nouvelle variable pour l'objet en chainage, généralement vous ne le faites pas correctement;)

Answer 2

Enregistrer sous un autre nom, comme celui-ci:

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. 
    }); 
}); 

La fermeture de la fonction intérieure fera en sorte qu'il est visible.

Answer 3

Faire un alias pour cette via

var _this = this; 

Si vous écrivez une fonction de requête $('.abc') et utiliser jQuery comme click, hover etc, this sera toujours référence au noeud DOM courant jQuery est en train de traiter.

Answer 4

Stockez ceci dans une variable locale.

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

Deux façons:

• cache this dans une variable locale avant d'appeler .animate()
• utilisation .proxy() pour passer votre this référence à .animate()

exemple 1:

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

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

exemple 2:

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

Answer 6

Dans une fonction de rappel jQuery this est toujours à l'élément DOM que la fonction s'applique.

Si vous souhaitez accéder à this dans votre première fonction de rappel, vous devrez créer une référence à avant vous animez:

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. 
    }); 
});