Question

在下面的图片中我正在尝试构建： random boxes

想法是在整个页面加载之前隐藏所有框。然后他们应该在浏览器视口附近设置随机位置，然后需要动画它们（框）以移动到正确的位置。

Box在CSS中具有绝对位置，我的想法是当窗口加载以将初始位置放在变量中，然后随机化框的位置，然后最终将其移动到起始位置。希望我很清楚：）

以下是我目前的设置：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 - 随意放置盒子，然后动画回原位。

我已经分离了两个动作，使用原始代码将这些框放在随机位置，但现在还使用jQuery's Data将原始位置存储在相关数据中，然后使用{{}}将它们设置回适当的位置。< / p>

您现在可以通过调用以下任一方法随机化并重新设置框：

$(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);
    });
}

Answer 3

我认为您正在寻找jQuery Isotope plugin。这个Stack-exchange page是用itp>的变体实现的

jQuery - 随机化框并在窗口加载时为它们设置动画

3 个答案:

DEMO - 随意放置盒子，然后动画回原位。