0

テキスト アニメーションを作成しようとしています。アイデアは、一部のテキストが右から左に移動し、5 秒後に消えるというものです。

次のコードを開発しましたが、正常に動作しています。jsfiddleしかし、問題は、spansテキストが複数ある場合、それらを個別に表示する方法がわかりません。

HTML

<span class="magic" >Magic1</span>

Jクエリ

<script>

var left = $('.magic').offset().left;
$(".magic").css({left:left}).animate({"left":"0px"}, 2000);
$(".magic").fadeOut(3000); 

</script>

CSS

<style>
.magic {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;

}
</style>

次のようなテキストが複数ありますが、それらを 1 つずつ表示/アニメーション化し、アニメーションが終了したときにアニメーションを最初から開始する方法を教えてください。

<span class="magic" >Magic1</span>
<span class="magic" >magic2</span>
<span class="magic" >magic3</span>
// unlimited

よろしくお願いします:)

4

4 に答える 4

1

マークアップにエラーがありますが、それとは別に、再帰とコールバック パターンを使用できます。

更新 2 (@Madbreaks の功績による):: http://jsfiddle.net/JZzdp/6/

var magic = $('.magic'),
i = 0,
len = magic.length,
left = $('.container').width(); //SET THIS TO WHATEVER PARENT CONTAINER YOU ARE SLIDING INSIDE

var slide = function(){
  magic.each( function( i ){
    $( this ).delay( i*5000 ).fadeIn().animate({"right":"+="+left},2000, function(){
      $( this ).fadeOut(3000).animate({ "right":"-="+left }, 0, function(){
        if( i === len - 1 ){ slide(); }
      });
    });
  });
}
slide();
于 2012-08-01T23:01:47.303 に答える
0

これを試してください：jsfiddle

var left = $('.magic:first').offset().left;

$(".magic").each(function(i){
    $(this)
        .css({left:left})
        .delay(i * 5000)
        .animate({"left":"0px"}, 2000, function(){
            $(this).fadeOut(3000);
        });
});​

乾杯

于 2012-08-01T23:09:09.763 に答える
0

まず、id="magic" の代わりに class="magic" を使用することを願っていますが、それを超えると、次のように "each" イテレータを使用するだけになると思います。

$('span.magic').each(関数(intIndex) {

$(this).animate({ ... ヤダヤダヤダ

});

于 2012-08-01T22:56:11.727 に答える
0

私は jsFiddle を作成しました。うまくいけば、それはあなたが望んでいたものです。.delay()トランジションにはjQueryの機能を利用しました。タイミングを微調整できます。

jsフィドル

var mLength = $(".magic").length;

for(var i = 1; i < mLength+1; i++){
    var $magic = $("#magic"+i);
    var offset = $magic.offset().left;
    $magic.css({left:offset}).hide();
    $magic.delay(7000*(i-1));
    $magic.fadeIn(500);
    $magic.animate({"left":"0px"}, 5000); 
    $magic.fadeOut(3000); 
}​
于 2012-08-01T23:10:21.940 に答える