0

私はゆっくりと存在に消え、コンテナ全体に距離を置いて浮かぶ一連の div を作成しようとしています。フローティング div (フローター) がコンテナーの外/画面外に出ると、それが生成された場所に再表示され、再びフェードインして、永遠にループします。

基本的なアニメーションを正常に作成できましたが、複数の div を生成し、コンテナーの端まで互いにフロート/フォローする効率的な方法がわかりません。

どうすればこれができるか知っている人はいますか？

単一の div アニメーションのこれまでの内容は次のとおりです。

function floaters()
{
$('.floater').each(function(){
    $(this).animate({'opacity': '1'}, {queue: false, duration: 5000}) ;
    $(this).animate({'left': '-=652'}, 2000, 'linear', function(){
        $(this).css('left', '622px') ;
        $(this).css('opacity', '0.0') ;
        floaters() ;
    }) ;
})
}

「それぞれ」を使用する必要があるかどうかはわかりません。

ここで私がこれまでに行ったことと、私が達成しようとしていることを見ることができます。

http://jsfiddle.net/Y73TZ/

基本的に、一連のボックスが互いに続き、各ボックスがページの最後に到達したらループします。これは、この 1 つのボックスとまったく同じですが、それぞれの間にランダムな開始距離があります。

@ r0m4n私が望んでいたようなものですが、各ボックスを同じ場所で開始し、それらの間に遅延を設けて、各ボックス間のスペースが均等になり、一度に8つのボックスしか存在しないようにしたい. これを実現するためにスクリプトをどのように調整しますか?

私がやろうとしていることをよりよく説明することを期待して、スクリプトをやり直しました。アニメーションの特定のポイントで発生させたいイベントをより適切に制御できるようにするため、代わりに setInterval を使用しました。

var creationTimer ;
var moveTimer ;
function floaters()
{
var firstTime = 1 ;
moveTimer = setInterval(function(){
    $('.floater').each(function(){
        var pos = $(this).position() ;
        $(this).css('left', (pos.left-2)+'px') ;
        if(pos.left < -32 || firstTime == 1)
        {
            firstTime = 0 ;
            $(this).css('left', '620px') ;
            $(this).hide() ;
            $(this).show(500);
        }
        if(pos.left < 500 && pos.left > 450)
        {
            clearTimeout(creationTimer) ;
            creationTimer = setTimeout(function(){
                $('#latest').append('<div class="floater"></div>') ;
            }, 1000)
            clearInterval(moveTimer);
        }
    })
}, 50)
}

clearInterval(moveTimer) が呼び出された時点で、新しい div が表示され、前のボックスに続くようにします。そのサイクルをX回繰り返したいです。これを十分に説明できていることを願っています。これまでお世話になりました。

誰でも助けることができますか？

4

2 に答える 2

0

おそらくいくつかの改善を使用できますが、右から左に移動するマーキーを作成するには、次のようにすることができます。

jQuery:

$(document).ready(function() {
    $('.floater').css('opacity', '0');
    var randomNumber = 0;
    var $flot = null;
    floaters();
})

function floaters($current) {
    if ($current != null) $flot = $current;
    else $flot = $('.floater');

    $flot.each(function() {
        randomNum = Math.ceil(Math.random() * 320); /*Random number from 1 to 320*/
        $(this).css("left", randomNum);
        $(this).animate({
            'opacity': '1'
        }, {
            queue: false,
            duration: 5000
        });
        $(this).animate({
            'left': '0'
        }, 10000 * (randomNum / 320), 'linear', function() {
            $(this).css('opacity', '0.0');
            floaters($(this));
        });
    })
}

技術的には、すべてのボックスが同じ位置で終了する必要があるため、CSS を更新して絶対位置を含めました。

#latest {
    background:#000000;
    height:35px;
    width:320px;
    position:absolute;
}
.floater {
    width:32px;
    height:32px;
    background:#fff;
    position:absolute;
    left:320px;
}

基本的に、すべてのフローティング ボックスを見つけて、アニメーション機能を開始しますが、それらが開始された場所に相対的な時間を設定します。フロート ボックスが宛先に到達すると、プロセスが繰り返されますが、関数に渡されて開始位置が再割り当てされます。このスクリプトは、追加することはできますが、フローティング ボックスの衝突には対応していません。

http://jsfiddle.net/r0m4n/Y73TZ/4/

于 2012-08-13T20:56:40.317 に答える
0

私は何かをしようとします。コードを再利用しない場合は申し訳ありません。お好みで設定していただければと思います。

var distance_to_walk = $("#latest").width();
var interval_between_floater = 50; // distance in pixel between each floater
var distance_pop = distance_to_walk - 32; // replace 32 by the width of a floater
var step = 2; // the number pixel through by floater at each step
var number_floaters = 8; // number of floater to display
var delay_between_frame = 10;
var duration_animation = 1000 * 10 * 3;

$('.floater').each(function(){
    $(this).css('left',distance_pop + 'px') ;
});

var i=0;
var number_frames = duration_animation/ (delay_between_frame + 2);
var cpt_frames = 0;
var interval = setInterval(function(){

$('.floater').each(function(){
   $(this).css('left', ($(this).offset().left-2) + "px");
    if(!$(this).hasClass("spawned") &&
       ($(this).offset().left + $(this).width() + interval_between_floater)  <= distance_pop ){
       // If a spawner can spawn another floater
       if( i < number_floaters){
          //If the maximum floaters is not good
          var new_floater = $(this).clone();

          $("#latest").append( new_floater );
          // Move the floater at the beginning
          $(new_floater).css('left', distance_pop + 'px');
          // Add this to disable the spawning with this floater
          $(this).addClass("spawned");
          i++;
      }
    }
    if( $(this).offset().left <= -($(this).width())){
        // If the floater is out of screen
        $(this).css("left", distance_pop + 'px');
    }
});

cpt_frames++;

if(cpt_frames >= number_frames){
  console.log("fin");
  clearInterval(interval);
  return;
}
}, delay_between_frame);

ここで例をテストできます

編集 ：

ここに新しい例があります。

編集2：

相対位置の例はこちら

于 2012-08-16T15:56:24.727 に答える