jQuery的 - 随机化箱和它们的动画窗口上的负载(jQuery - Randomize boxe

图片上的波纹管是什么，我试图建立：

想法是，所有的箱子都隐藏，直到整个页面加载。然后，他们应该已经建立围绕浏览器中查看端口随机位置，然后他们（盒）需要被动画移动到正确的位置。

盒在CSS绝对位置，而我的想法是，当Windows加载把初始位置变量，然后随机箱子的位置，最后将其移动到起始位置。希望我是明确的:)

这里是我的当前设置： http://jsfiddle.net/HgMB4/

你会发现，我失去了对窗口加载代码，因为我不知道如何盒子动画到其初始位置。

$(window).load(function(){
    //Huh! What to write here to animate boxes to their initial positions set by CSS?
});

Answer 1:

试试这个

    $(document).ready(function(){
      var h = $(window).height();
      var w = $(window).width();            
      $('#intro .box').each(function(){
            var originalOffset = $(this).position(),
            $this = $(this),
            tLeft = w-Math.floor(Math.random()*900),
            tTop  = h-Math.floor(Math.random()*900);

           $(this).animate({"left": tLeft , "top": tTop},5000,function(){
                           $this.animate({
                               "left": originalOffset.left, 
                               "top": originalOffset.top
                           },5000);

                        });        
    });
});

这将动画框随机位置，然后将其移回原来的位置。

这里是工作演示http://jsfiddle.net/HgMB4/18

如果你想，当他们移动到初始位置仅动画框，然后试试这个

$(document).ready(function(){
    var h = $(window).height();
    var w = $(window).width();            
    $('#intro .box').each(function(){
        var originalOffset = $(this).position(),
            $this = $(this),
           tLeft = w-Math.floor(Math.random()*900),
           tTop  = h-Math.floor(Math.random()*900);

        $(this).css({
            "left": tLeft,
            "top": tTop
        });

        $this.animate({ "left": originalOffset.left, 
                         "top": originalOffset.top
                     },5000);

    });
});

这里是工作演示http://jsfiddle.net/HgMB4/22

Answer 2:

要求
箱子被隐藏，直到整个页面加载
箱子被设置为围绕浏览器视图端口随机位置
盒子需要动画到正确的位置

你可以存储在原来的位置，你的随机位置后开始动画他们回到自己的起始位置。我还缓存，重复，以加快代码执行任何DOM引用（没有明显的最有可能的，但它是很好的做法）

DEMO -随意摆放，然后盒动画回到正确的位置。

我已经分居2分的动作，放置在箱子使用原密码随机位置，但现在还储存使用相关数据的原始位置jQuery的数据 ，然后使用这些动画回到正确的位置。

现在，您可以随机化，并通过调用方法重新设置对需求的框：

$(document).ready(function() {
    var h = $(window).height();
    var w = $(window).width();
    var $allBoxes = $('#intro .box');

    placeBoxesRandomly($allBoxes, h, w);

    placeBoxesToDataStorePositions($allBoxes);
});

placeBoxesRandomly仍然没有，除了它现在还与元素的原来的开始位置的数据关联起来它的所作所为之前：

function placeBoxesRandomly($boxes, h, w) {
    $boxes.each(function() {
        var $box = $(this);
        var position = $box.position();

        tLeft = w - Math.floor(Math.random() * 900), tTop = h - Math.floor(Math.random() * 900);
        $box.css({
            "left": tLeft,
            "top": tTop
        });
        $box.data("start-position-left", position.left);
        $box.data("start-position-top", position.top);
    });
}

placeBoxesToDataStorePositions放置框;存储在相关的数据的位置。

function placeBoxesToDataStorePositions($boxes) {
    $boxes.each(function() {
        var $box = $(this);
        $box.animate({
            "left": $box.data("start-position-left"),
            "top": $box.data("start-position-top")
        }, 3000);
    });
}