页面加载中的Jquery随机动画内容

Question

我对jQuery不是很熟练，但我一直在玩它。

一直致力于这个网站谁有一个马赛克设计在头版与许多图片。被安置在div中的人。

当您进入页面时，我希望这个div随机加载。

我已经试过了

$(function() {
   $('.ih').hide().fadeIn('slow');
});

但那会载入整页。我想让迪夫：

• 随机动画在
• 页面中，当您单击链接

时，可以将其动画到另一个页面中。

这个是可能的吗？

Answer 1

我假设所有的div都有一个.ih类，所以当您选择这个类时，它们都会出现。

试着做这样的事情：

var divs = $(".ih").get().sort(function(){ 
    return Math.round(Math.random());
}).slice(0, 10 );

$(divs).show();

我把(0，10)放在你想要的div#上。

编辑:从Showing random divs using Jquery修改的示例

Answer 2

是的，这是可能的。我怀疑会有一个插件，完全可以做你想要的，但只要做一点工作，你就能建立这个。在将问题划分为离散的步骤方面，您有一个很好的开端：

步骤1：页面加载：最简单的方法是在没有所有图像的情况下加载页面--普通的。您将希望这个加载步骤尽可能快地完成。

步骤2在中动画图像:首先，构建图像的列表以及它们的去向。我不确定你是否会下订单和职位，或者只是订单。不管是哪种方式，都会成功的。把它构建成一个很好的数组。

其次，您将希望一个接一个地以顺序的方式将这些动画化：

var imgs = ...

function animateOne() {
  var img = imgs.pop();
  // preload the image
  (new Image).src = img.src;

  // set it up
  $(img.dom).css('opacity',0).attr('src',img.src);

  // animate it in
  $(img.dom).animate('fast', { opacity: 1 }, function() {
    if (imgs.length) {
      animateOne(); // recurse when we're done with the last one!
    }
  });
}

有更简洁的方法可以以批处理的方式完成，但是当您尝试不同的效果时，这可能很有用。

步骤3:要处理动画输出，只需实现您自己的jQuery单击处理程序：

$(...).click(function() {
  $(this).animate(...);
  return false;
});

显然，这是一个粗略的草图开始。