2

您好，我目前正在制作一把剪刀剪出优惠券的动画...如果页面上有一张优惠券但效果很好但有多个优惠券它会减慢速度并偶尔行动？

多个示例

我正在努力做到这一点，以便当您单击“剪辑它！”时 在优惠券的底部...动画出现在那张优惠券上，而且只有那张优惠券！

更新：我已经做得更远了，但仍然无法让动画在网站上运行，因为它与提供的令人敬畏的示例略有不同......基本上我有多个带有 .item 类的 div 和示例只有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);
                                });
                            });
                        });
                    });

                });
            });
        });
    }     
});
4

4 回答 4

4

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

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")，因为这也不是特定的。

于 2013-01-04T06:03:15.110 回答
1

我认为你必须在动画循环函数中传递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);

于 2013-01-04T07:02:45.773 回答
1

您可以使用以下代码：

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"))]

演示 | 来源

编辑：

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：您的多演示页面中 似乎有其他代码无法正常运行：

这是一个修复：

/* 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;
                                });
                            });
                        });
                    });
                });
            });
        });
    }
});
于 2013-01-13T17:04:05.240 回答
0

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

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

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

我还将这个动画的很多分割成单独的函数，所以一个函数会是这样的：

openShutScissors(id)

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

moveScissors(id)

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

onClick="moveScissors(245)"

触发 moveScissors() 然后触发 openShutScissors()

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

于 2013-01-11T19:57:28.637 回答