0

次のように右向きの矢印が 3 つあります。

ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

最初のフェードイン、遅延、2 番目のフェードイン、遅延、3 番目のフェードイン、遅延、ぐるぐる回るアニメーションを実行しようとしています。

私は次のことを行いましたが、それほどスムーズに実行されません。

いわば「ここに行く」のように、右向きの3つの矢印が点滅しているように見せたかったのです。

       function animate() {
           $('.left').fadeIn(300).delay(250).fadeOut(250);
           $('.middle').delay(300).fadeIn(250).fadeOut(250);
           $('.right').delay(400).fadeIn(200).fadeOut(200);
            }
       animate();
       setInterval(animate, 1000);

これを正しい遅延で本来あるべき姿にするための微調整はありますか?

編集：ここでフィドルhttp://jsfiddle.net/Jvn4F/

4

1 に答える 1

2

このソリューションでは、CSS3 キーフレームを使用します: http://jsfiddle.net/Jvn4F/2/

CSS:

@-webkit-keyframes animate {
 0%{
   opacity: 0;
 }
40%{
   opacity: 0;
}
100%{
   opacity: 1;
 }
}
#arrows {
    width:100%;
    height:100px;
    position:absolute;
    top:220px;
    left:300px
}
#arrows .arrow{
    background:url(http://i.stack.imgur.com/xRwtw.png) no-repeat;
    height:49px;
    width:40px;
    float:left;
    opacity: 0;
}
#arrows .arrow.show{
    -webkit-animation-name: animate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}

JS:

$(".left").addClass('show');
setTimeout(function(){
    $(".middle").addClass('show');
}, 500);
setTimeout(function(){
    $(".right").addClass('show');
}, 1000);

このソリューションでは、アニメーションに jQuery を使用します: http://jsfiddle.net/Jvn4F/3/

jQuery:

function animate() {
    $('.left').fadeTo(500, 1).delay(500).fadeTo(500, 0);
    $('.middle').delay(250).fadeTo(500, 1).delay(500).fadeTo(500, 0);
    $('.right').delay(500).fadeTo(500, 1).delay(500).fadeTo(500, 0);
}
setInterval(animate, 2000);

CSS:

#arrows{
    width:100%;
    height:100px;
    position:absolute;
    top:220px;
    left:300px
}
#arrows .arrow{
    background:url(http://i.stack.imgur.com/xRwtw.png) no-repeat;
    height:49px;
    width:40px;
    float:left;
    opacity: 0;
}

fadeIn()andは DOM から要素を削除するためfadeOut()、遅くなり、そのためにfloat:leftand.middleが.right一度シフトする.leftか.middle、フェードアウトします。

setTimeoutいずれかの方法 (JSまたはが原因でsetInterval) のタイミングが不正確になる可能性が あることを考慮する必要があります。一部の用途では (ajax ローダー アイコンで見られるように)、複数の小さな画像をアニメーション化するよりも、アニメーション化された gif の方が適している場合があります。

于 2013-07-02T01:22:00.600 に答える