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

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

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

框在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); }); });​​  $(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引用，以加快代码执行速度（很可能不是很明显，但这是很好的做法）

演示 – 随机放置盒子，然后动画回到正确的位置。

我已经分离了2个动作，使用原始代码将框放置在随机位置，但现在还使用jQuery的数据将原始位置存储在关联数据中，然后使用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); }); } 

Answer 3

我想你正在寻找jQuery Isotope插件 。 这个Stack-exchange页面实现了它的变体