2

こんにちは、私は現在、ハサミでクーポンを切り取るこのアニメーションに取り組んでいます...ページにクーポンが 1 つしかない場合はうまく機能しますが、クーポンが複数ある場合は速度が低下し、散発的に動作しますか?

複数の例

「CLIP IT!」をクリックするとこんな感じになるようにしています。クーポンの下部に... アニメーションはそのクーポンとそのクーポンのみに表示されます!

更新:私はそれをもう少し進めましたが、提供された素晴らしい例とは少し異なるため、サイトでアニメーションを動作させることはまだできません...基本的に、.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")クリックされた天候に関係なく、すべてのはさみを選択します。代わりに、クリック ハンドラを次のように書き換えます。

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ですindexanimationLoop(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);
                });
              });
            });
          });
        });
      });
    });
  }

それが行うことは、はさみを絶対[固定されていない]に設定すると、それを含む親[クーポン自体; .item-inner]。したがって、「0」の位置は、クーポンの左上隅にハサミを置くのに十分です。

関数へのクリック パス トリックを使用して、クリックされてアニメーション化されたはさみをメモリに保持し、はさみごとにアニメーションの 1 つのインスタンスが滞りなく発生するようにします。また、それで、各はさみのオブジェクトは、インスタンスごとに既に保存/選択されており、不要です (つまり、参照する必要はありません$(".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: multidemo ページで正しく機能しない追加のコード があるようです:

ここに修正があります:

/* 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

はさみが動的に読み込まれる場合 (つまり、クーポンごとに 1 対のはさみ)、ID の末尾に整数を追加できます。したがって、div id="scissors_245" のようなメイン コンテナがあり、245 はクーポン ID です。次に、アニメーションを呼び出す必要がある場合は、常に親コンテナーの ID を先頭に付けます。

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

次に、要素の最も近いまたはインデックスに依存する必要はありません。移動したり、周りの他の人が取り除かれたりしても、一日中それをつかむことができます。

また、このアニメーションの多くを個別の関数に分割するので、1 つの関数は次のようになります。

openShutScissors(id) 

それははさみを開閉し、もう一方は

moveScissors(id) 

ここで、id は実際の ID に追加した整数です。次に、「クリップする」ボタンで呼び出します

onClick="moveScissors(245)" 

これは moveScissors() をトリガーし、次に openShutScissors() をトリガーします

このようにして、すべての狂気を分離し、一度に 1 つずつ処理します。

于 2013-01-11T19:57:28.637 に答える