Fatal编程技术网
  • jquery/
  • 如何使jQuery动画显示在它所使用的实际div上'；点击了什么？

如何使jQuery动画显示在它所使用的实际div上'；点击了什么？

jquery animation

如何使jQuery动画显示在它所使用的实际div上'；点击了什么？,jquery,animation,jquery-animate,multiple-instances,Jquery,Animation,Jquery Animate,Multiple Instances,你好，我目前正在制作一把剪刀剪出优惠券的动画。。。如果有多张优惠券，效果会很好，但如果有多张优惠券，效果会很慢，而且会偶尔出现问题 我正在尝试这样做，当你点击优惠券底部的“剪辑它！”时。。。动画显示在该优惠券上，并且仅显示该优惠券 更新：我已经做了一点进一步，但仍然无法让动画在网站上工作，因为它与提供的令人敬畏的例子略有不同。。。基本上，我有一个.item类的多个div，示例只有1 谢谢你的帮助。。。我学到了一点 以下是我的.js文件中的代码： jQuery(function($){

你好，我目前正在制作一把剪刀剪出优惠券的动画。。。如果有多张优惠券，效果会很好，但如果有多张优惠券，效果会很慢，而且会偶尔出现问题

我正在尝试这样做，当你点击优惠券底部的“剪辑它！”时。。。动画显示在该优惠券上，并且仅显示该优惠券

更新：我已经做了一点进一步，但仍然无法让动画在网站上工作，因为它与提供的令人敬畏的例子略有不同。。。基本上，我有一个.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);
                                });
                            });
                        });
                    });

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

jQuery（函数（$）{
//试试这个
$（窗口）。加载（函数（）{
});
$（“.clip_it”）。单击（clipIt）；
函数clipIt（）{
$（“.ToBeAnimated”）.fadeIn（）；
动画循环（）；
//jfbc.opengraph.triggerAction（'1'，'http://www.extremecouponnetwork.com');
}
函数animationLoop（）{
$（“.ToBeAnimated”）.css({
顶部：（$（“.item.item内部”）.offset（）.top-parseInt（$（“.ToBeAnimated”）.height（））/2），
左：（$（“.item.item-inner”）.offset（）.left-parseInt（$（“.ToBeAnimated”）.width（））/2）
}).轮换（270）；
$（“.ToBeAnimated”）.animate({
顶部：$（“.item.item内部”）.offset（）.top+$（“.item.item内部”）.height（）-$（“.ToBeAnimated”）.height（）/2
}，1000，函数（）{
$（此）。设置动画({
旋转：“180度”
}，1000，函数（）{
$（“.ToBeAnimated”）.animate({
左：$（“.item.item inner”）.offset（）.left+$（“.item.item inner”）.width（）-$（“.ToBeAnimated”）.width（）/2
}，1000，函数（）{
$（此）。设置动画({
旋转：“90度”
}，函数（）{
$（“.ToBeAnimated”）.animate({
顶部：$（“.item.item内部”）.offset（）.top-$（“.ToBeAnimated”）.height（）/2
}，1000，函数（）{
$（此）。设置动画({
旋转：“0度”
}，函数（）{
$（“.ToBeAnimated”）.animate({
左：$（“.ToBeAnimated”）.width（）/2
}，1000，函数（）{
设置超时（animationLoop，1000）；
});
});
});
});
});
});
});
}     
});
您应该为单击的特定元素设置动画。具体地说，我的意思是你只在点击“剪辑”按钮的地方设置剪刀的动画<代码>$（“.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”）
，因为这也不具体

我认为您必须在动画循环函数中传递
对象
及其
索引
：

你可以在这里找到小提琴：

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
都将设置该绑定的动画，只需将
类名
及其
索引
传递给
动画循环（它，索引）
如果剪刀是动态加载的（即每个优惠券一把剪刀），您可以在id的末尾附加一个整数。这样您就有了一个主容器，如
div id=“剪刀”245
其中245是优惠券id。然后，当您需要调用任何动画时，您总是在其前面加上父容器的id


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


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

我还将很多动画拆分为单独的函数，因此其中一个函数类似于：


openShutScissors(id) 


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


moveScissors(id) 


其中id是附加到实际id上的整数。然后在“clip it”按钮上调用


onClick="moveScissors(245)" 


哪个会触发moveScissors（），哪个会触发openShutScissors（））


这样，您就可以将所有的疯狂行为分离出来，一次只处理一件事。
您可以使用以下代码：


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 internal
]对其进行动画处理。因此，“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);
                });
              });
            });
          });
        });
      });
    });
  }



jQuery（函数（$）{
$（“body”）。在（“click”、“.clip_it”上，函数（）{

if（$（this）.parent（）.find（“.clip\u it”）.length你能制作一个gif并在点击按钮时将其显示在静态sisccor图像上方，并在gif结束后隐藏它吗？我的眼睛已经厌倦了在你的代码楼梯上走来走去。谢谢Jai，这很有意义…我离你很近了…我已经玩了几个小时你的代码变体，但是我只是不能让它与我的实际站点一起工作…区别在于你的小提琴有一个.item div和几个.item内部链接

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