jquery - 如何在加载页面时制作图像 'pop out'(使用 jQuery 或可能的 CSS 转换)

Question

我正在寻找一种方法，在加载网页时将图像从 10 像素宽和 10 像素高转换为全尺寸版本。这样图像就会“弹出”。

我研究过 CSS 转换，但它们似乎只能由 :hover 或其他伪状态触发。我正在寻找一种无需用户干预即可发生这种情况的方法。谁能指出我正确的方向？

谢谢!

Answer 1

查看 animate() jQuery 中的函数。有一个类似于您所请求的示例，但是，它是通过 onClick 事件处理程序触发的。只需适当放置代码:

$(document).ready(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

要添加多个图像，您可以创建一个数组并使用 setInterval 循环遍历数组的每个值，并根据数组索引对当前图像运行动画函数。