如何在这个疯狂的jQuery动画循环结束时“做东西”没有错误?

时间:2013-01-31 07:52:32

标签: javascript jquery dom jquery-animate jquery-masonry

我想在这个疯狂的动画循环结束时“做一些事情”...我在动画结尾处注释掉的警报效果很好......但是,我真正需要它做的是删除/隐藏最近的div与类.item(类似这样)

    var jremove = $(this).closest('.item').hide();
        $container.masonry('remove', jremove );

        //Then trigger a reload function for masonry
        reloadMasonry();   // not working yet

当我尝试做任何事情但警告一条简单的消息时,我收到如下错误:

  Uncaught TypeError: Object #<HTMLImageElement> has no method 'closest' 

您可以在下方动画的底部看到它:

 jQuery(function ($) {

    $("body").on("click", ".clip_it", function () {
        if ($(this).parent().find(".clip_it").length<1){
            $(this).after('<a class="clip_it" href="javascript:void(0)" onclick="">CLIP IT!</a><img src="http://img.photobucket.com/albums/v29/wormholes201/animated-scissors.gif" class="ToBeAnimated">');
    }

    animationLoop($(this).closest(".item-inner").eq(0),$(this).parent().find(".ToBeAnimated").eq(0));
  });
});
  function animationLoop(ctx,ctx2) {
    ctx2.fadeIn();
     ctx2.css({
      top: (0 - parseInt(ctx2.height()) / 2),
       left: (0 - parseInt(ctx2.width()) / 2),
       position:"absolute",
       "z-index":800
    }).rotate(270);
    ctx2.animate({
      top: ctx.height() - ctx2.height() / 2
    }, 1000, function () {
      ctx2.animate({
        rotate: "180deg"
       }, 1000, function () {
         ctx2.animate({
          left: ctx.width() - ctx2.width() / 2
        }, 1000, function () {
           ctx2.animate({
             rotate: "90deg"
           }, function () {
             ctx2.animate({
               top: 0-ctx2.height() / 2
             }, 1000, function () {
              ctx2.animate({
                rotate: "0deg"
              }, function () {
                ctx2.animate({
                  left: (0 - parseInt(ctx2.width()) / 2)
                }, 1000, function () {
                  setTimeout(animationLoop(ctx,ctx2), 1000);

                //I want to remove the coupon (.item) & reload masonry here 
                // TEST ALERT WORKS = alert("animation complete");

                    var jremove = $(this).closest('.item').hide();
                    $container.masonry('remove', jremove );

                    reloadMasonry();
                    return false;
            });
          });
        });
      });
    });
  });
});
}

如果您认为有更好的方法,我愿意接受其他建议吗?感谢您的帮助!

1 个答案:

答案 0 :(得分:3)

  

Uncaught TypeError: Object #<HTMLImageElement> has no method 'closest'

问题是你的就绪处理程序的$ (你传递给jQuery(function($) { ... });的函数)没有指向jQuery,它指向其他东西(我的猜测是Prototype或MooTools)。因此$(this)返回HTMLImageElement(可能由Prototype或MooTools增强)而不是jQuery对象,因此它没有closest函数。

animationLoop函数移动到你的就绪处理程序(因此它看到jQuery传递到就绪处理程序而不是全局的$),或使用{{在该函数中代替jQuery

相关问题