jQuery-将框随机化并在窗口加载时对其进行动画处理 [英] jQuery - Randomize boxes and animate them on window load

问题描述

下面是我要构建的图片:

On the picture bellow is what I'm trying to build:

想法是所有框都被隐藏，直到整个页面加载为止.然后，他们应该在浏览器视图端口周围设置随机位置，然后需要对它们(框)进行动画处理以移动到适当位置.

Idea is that all the boxes are hidden until whole page loads. Then they should have set random positions around browser view port and then they (boxes) needs to be animated to move to their proper positions.

盒子在CSS中有绝对位置，我的想法是当Windows加载时将初始位置放入变量中，然后随机化盒子的位置，然后最终将其移动到起始位置.希望我很清楚:)

Boxes have absolute positions in CSS, and my idea is when windows loads to put initial position in variable, then randomize position of the box, and then finally move it to the starting position. Hope I'm clear :)

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

Here is my current setup: http://jsfiddle.net/HgMB4/

您会注意到，我在窗口加载时缺少代码，因为我不确定如何将框设置为初始位置.

You will notice that I'm missing code on window load, because I'm not sure how to animate boxes to their initial position.

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

推荐答案

尝试一下

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

                        });        
    });
});
​

这会将动画框设置为随机位置，然后将其移回其原始位置.

This will animate the boxes to random position and then will move them back to their original position.

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

如果只想在框移动到初始位置时对其进行动画处理，请尝试

If you want to animate boxes only when they move to initial position then try this

$(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

这篇关于jQuery-将框随机化并在窗口加载时对其进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！