Question

您好我正在制作这个剪刀剪掉优惠券的动画...如果有一个single coupon on the page但是有多个优惠券它会慢下来并且零星地行动会很有效吗？

我正努力让你点击“CLIP IT！”在优惠券的底部...动画出现在优惠券上，只有优惠券！

更新：我已经做了一点但仍然无法让动画在网站上运行，因为它与提供的令人敬畏的例子略有不同......基本上我有多个div与一类.item而这些例子只有1 ...

感谢帮助......我学到了一点！

以下是我的.js文件中的代码：

    jQuery(function($){

    //try this
    $(window).load(function(){



    });

    $(".clip_it").click(clipIt);

    function clipIt(){

            $(".ToBeAnimated").fadeIn();
            animationLoop();
            // jfbc.opengraph.triggerAction('1','http://www.extremecouponnetwork.com<?php echo $this->item->link; ?>');
    }

    function animationLoop() {

        $(".ToBeAnimated").css({
            top: ($(".item .item-inner").offset().top - parseInt($(".ToBeAnimated").height()) / 2),
            left: ($(".item .item-inner").offset().left - parseInt($(".ToBeAnimated").width()) / 2)
        }).rotate(270);

        $(".ToBeAnimated").animate({
            top: $(".item .item-inner").offset().top + $(".item .item-inner").height() - $(".ToBeAnimated").height() / 2
        }, 1000, function() {
            $(this).animate({
                rotate: "180deg"
            },1000, function() {
                $(".ToBeAnimated").animate({
                    left: $(".item .item-inner").offset().left + $(".item .item-inner").width() - $(".ToBeAnimated").width() / 2
                }, 1000, function() {
                    $(this).animate({
                        rotate: "90deg"
                    }, function() {
                        $(".ToBeAnimated").animate({
                            top: $(".item .item-inner").offset().top - $(".ToBeAnimated").height() / 2
                        }, 1000, function() {
                            $(this).animate({
                                rotate: "0deg"
                            }, function() {
                                $(".ToBeAnimated").animate({
                                    left: $(".ToBeAnimated").width() / 2
                                }, 1000, function() {
                                    setTimeout(animationLoop, 1000);
                                });
                            });
                        });
                    });

                });
            });
        });
    }     
});

Answer 1

您应该为已单击的特定元素设置动画。具体来说，我的意思是你只为剪刀设置动画，点击“剪辑它”按钮。无论点击天气如何，$(".ToBeAnimated")都会选择所有剪刀。因此，您将重写点击处理程序，如下所示：

function clipIt(){
    var $scissor = $(this).closest('.ToBeAnimated');
        $scissor.fadeIn();
        animationLoop($scissor);
}

function animationLoop($elem) {
    // only animate the intended scissors, not all of them
    $elem.css(...); // your animation code..
}

同样，在您的动画代码中，您可能不希望使用$(".item .item-inner")，因为它既不是特定的也不是。

Answer 2

我认为您必须在动画循环功能中传递object及其index：

你可以在这里找到一个小提琴： http://jsfiddle.net/zDJJT/

function animationLoop(it, index) {
            //---------^^--^^^^^----object and its index passed from click
    $(".ToBeAnimated").css({
        top: ($(".item ."+it).eq(index).offset().top - parseInt($(".ToBeAnimated").height()) / 2),
        left: ($(".item ."+it).eq(index).offset().left - parseInt($(".ToBeAnimated").width()) / 2)
    }).rotate(270);

    $(".ToBeAnimated").animate({
        top: $(".item ."+it).eq(index).offset().top + $(".item ."+it).eq(index).height() - $(".ToBeAnimated").height() / 2
    }, 1000, function() {
        $(this).animate({
            rotate: "180deg"
        },1000, function() {
            $(".ToBeAnimated").animate({
                left: $(".item ."+it).eq(index).offset().left + $(".item ."+it).eq(index).width() - $(".ToBeAnimated").width() / 2
            }, 1000, function() {
                $(this).animate({
                    rotate: "90deg"
                }, function() {
                    $(".ToBeAnimated").animate({
                        top: $(".item ."+it).eq(index).offset().top - $(".ToBeAnimated").height() / 2
                    }, 1000, function() {
                        $(this).animate({
                            rotate: "0deg"
                        }, function() {
                            $(".ToBeAnimated").animate({
                                left: $(".ToBeAnimated").width() / 2
                            }, 1000, function() {
                                setTimeout(animationLoop, 1000);
                            });
                        });
                    });
                });

            });
        });
    });
}

function clipIt() {
    $(".ToBeAnimated").css({"display":"block", "opacity":"0"}).animate({"opacity":1},800);
    animationLoop($(this).attr('class'), $(this).index());
    //------------^^passing curr obj^^---^^its index^^------passed in the function

}

$('.item-inner').click(clipIt);

我在此处所做的是，无论您点击.ToBeAnimated哪个都会动画到该界限，只需将class name及其index传递给animationLoop(it, index);

Answer 3

您可以使用以下代码：

jQuery(function ($) {
  $(".clip_it").on("click", function () {
    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);
                });
              });
            });
          });
        });
      });
    });
  }

它的作用是，它不依赖于offsetTop或offsetLeft，因为将剪刀设置为绝对[不固定]，将相对于它包含父[优惠券本身; .item-inner]。因此，“0”的位置足以将任何剪刀放在优惠券的左上角。

使用点击传递到功能技巧，将点击和动画剪刀保留在内存中，这样每个剪刀的一个动画实例都可以顺利发生。此外，每个剪刀的对象已经为每个实例存储/选择，并且不需要[意味着不需要引用$(".ToBeAnimated")）]

Demo | Source

修改

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

<强> EDIT2：您的additional codes中似乎multidemo page无法正常运作：

这是一个修复：

/* Begin */ jQuery(function ($) { reloadMasonry = function () { $(document.body).addClass('masonry-relayout'); $container.masonry('reload', function () { $(document.body).removeClass('masonry-relayout'); }); }; /* When any "click_it" link is clicked in the body, method used since .live() is deprecated and removed in jQuery 1.9 */ $("body").on("click", ".clip_it", function () { /* Checks to see if there is a scissors and adds one if there's not */ 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">'); } /* Starts the animation */ animationLoop($(this).closest(".item-inner").eq(0), $(this).parent().find(".ToBeAnimated").eq(0)); }); /* Function that starts the animation queue, "ctx" is the container while "ctx2" is the sissors */ 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 () { /* Event queue is completed! The sissors should be back at it's default position */ $container = $('#masonry-container'); /* "$(this)" is actually "ctx" here */ var jremove = ctx.closest('.item').hide(); $container.masonry('remove', jremove); reloadMasonry(); return false; }); }); }); }); }); }); }); } });

Answer 4

如果剪刀是动态加载的（即每张优惠券都有一把剪刀），你可以在id的末尾添加一个整数。所以你有一个像这样的主容器 div id =“scissors_245” 其中245是优惠券ID。然后，当你需要调用任何动画时，你总是在前面加上父容器的id。

$('#scissors_245 .leftside').animate(...

然后您不必依赖最近或元素的索引。如果它被移动或其他被移除，你仍然可以整天抓住它。

我还将很多这个动画分成了不同的函数，所以一个函数就像：

openShutScissors(id)

打开和关闭剪刀，另一个是

moveScissors(id)

其中id是您附加到实际ID的整数。然后在你的“剪辑它”按钮上调用

onClick="moveScissors(245)"

触发moveScissors（），然后触发openShutScissors（）

这样你可以将所有的疯狂分开，一次只处理一件。

如何让这个jQuery动画出现在它被点击的实际div上？

4 个答案: