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

将其保存为其他名称，如下所示：

 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

两种方式：

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 4

通过

为此创建别名

var _this = this;

如果编写jQuery查询$('.abc')并使用click，hover等函数，this将始终引用jQuery正在处理的当前DOM节点。

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

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

如何将$（this）引用传递给回调函数？

6 个答案: