Question

我正在尝试创建一系列缓慢淡入存在并在其容器中漂浮一段距离的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/

我基本上想要一系列相互跟随的框并在每个框到达页面末尾时循环，与这一个框完全相同，但每个框之间都有一个随机的起始距离。

@ 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次。我希望我能够很好地解释这一点。感谢您的帮助。

有人可以帮忙吗？

Answer 1

它可能会使用一些改进但你可以做这样的事情来创建一个从右到左移动的选框：

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/

Answer 2

我尝试做点什么。很抱歉，如果我不重复使用您的代码。我希望你能按照自己的意愿进行配置。

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);

您可以测试示例here

编辑：

新示例here。

编辑2：

具有相对位置here

的示例

如何使用创建/销毁条件生成动画div

2 个答案: