加载页面时如何使图像“弹出”（使用 jQuery 或可能的 CSS 过渡）答案

【问题标题】：How to make an image 'pop out' when page is loaded (using jQuery or possibly CSS transitions)加载页面时如何使图像“弹出”（使用 jQuery 或可能的 CSS 过渡）
【发布时间】：2023-03-08 20:16:01
【问题描述】：

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

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

谢谢！

【问题讨论】：

标签： jquery html css animation jquery-animate

【解决方案1】：

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

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

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

【讨论】：

谢谢！这很有帮助。我正在尝试为多个图像制作动画，有没有办法延迟动画，以便它们一个接一个地制作动画？我查看了 jQuery 文档，但没有看到任何关于延迟的内容。

【解决方案2】：

如果我可以做一个小插件，这是我的一个 jQuery 插件，可以用于此目的：http://odyniec.net/projects/imgzoom/

【讨论】：