0

我正在尝试创建一系列缓慢消失的 div，并在其容器上漂浮一段距离。一旦浮动 div (floater) 离开容器/屏幕外，它就会重新出现在它产生的位置并再次淡入，永远循环。

我已经成功地创建了基本动画，但我不知道有一种有效的方法来生成多个 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 次。我希望我能很好地解释这一点。感谢您一直以来的帮助。

任何人都可以帮忙吗？

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 回答