jQueryにて、animate関数を使ったループするアニメーションを作成中です。
それぞれの要素が独自の動きをして、それがひたすらループするというものです。
これらをずっとループさせるのではなく、2回だけループとか3回だけとか、指定の回数だけループさせる方法はないでしょうか?
下記が作成中のコードです。
ご教示いただけましたら幸いです。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
// 設定
var $width =340; // 横幅
var $height =300; // 高さ
var $interval = 5300; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});
$(function () {
setTimeout("animation()",500); //アニメーションが実行されるまでの時間
});
function animation(){
sampletext();
sampleimage();
box();
}
function sampletext() {
$('.sampletext').animate({
left: '350px',opacity:0
}, 0).animate({
left: '110px',opacity:1
}, 1000);
setTimeout('sampletext()', 10000); //アニメーションを繰り返す間隔
}
function sampleimage() {
$(".box2").animate({
top: "250px" //要素を動かす位置
}, 0).animate({
top: "40px" //要素を戻す位置
}, 400)
setTimeout("sampleimage()", 10000);//アニメーションを繰り返す間隔
}
function box() {
$('.box1').animate({
left:"140px",
opacity:".1"
},1110).animate({
left:"140px",
opacity:"1"
}, 2100);
setTimeout('box()', 12000); //アニメーションを繰り返す間隔
}
</script>
<style>
#wrap {
position: relative;
width: 300px;
height: 250px;
margin: 0px auto;
}
.sampletext {
font-size: 12px;
position: absolute;
width: 100px;
height:14px;
top:50px;
left:160px;
float:left;
}
.box2 {
color: white;
text-align: center;
width: 140px;
position: absolute;
height: 26px;
background:#D9292C;
font-size:10px;
display:block;
}
#slide {
width:340px;
height:300px;
margin:0 auto;
position:relative;
}
.box1 {
width: 100px;
height:100px;
position: absolute;
top:40px;
left:30px;
text-align: center;
}
</style>
<title>サンプル</title>
</head>
<body>
<div id="wrap">
<div class="box1">
サンプルボックス1
</div>
<div id="slide">
<ul>
<li class="sampletext">ここはテキストが</li>
<li class="sampletext">切り替わる</li>
</ul>
</div>
<span class="box2">サンプルボックス2</span>
</div>
</body>
</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/09/03 23:30