こんにちは、私は現在、ハサミでクーポンを切り取るこのアニメーションに取り組んでいます...ページにクーポンが 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);
});
});
});
});
});
});
});
}
});