0

我进行了搜索，但在任何地方都找不到这个确切的问题的答案（请让我知道是否有过，但我错过了！）

我正在尝试创建一个动画，其中四个图像分两个阶段在背景图像上淡入 - 理想情况下使用 jQuery，理想情况下 jQuery 可以在 IE8 及更高版本中运行。

准确描述我打算创建的效果有点困难，所以我制作了一个示例 gif 动画来说明它。显然，gif 循环动画，但我只打算在页面加载时加载和播放一次。在这里查看：http: //i.imgur.com/udnFqja.gif

我试过四处寻找.animate()图像遮蔽/显示的组合，当它们被显示时，它也会模糊图像的边缘——但到目前为止还没有运气！

如果您对进行此操作的最佳方法有任何想法，我将非常感激听到他们的声音。

谢谢。

（编辑！或者，可以使用循环插件wipe提供的从左到右的过渡，并将三个 jpeg 分层，但在这种情况下，仍然需要一些方法来模糊图像的边缘，因为他们刷出来）

4

1 回答 1

0

此方法将仅使用 jQuery 动画和 CSS。

您可以简单地在具有背景图像的一个 div 之上放置两个 div。将它们的初始宽度设置为零，当页面加载时，为第一个宽度设置动画。然后使用该动画的回调函数为第二个（最顶部）的宽度设置动画。

要获得模糊效果 - 将透明模糊渐变设置为图像或另一个高度为 100% 且背景在 Y 轴上重复的 div 背景。对两层 div 中的每一个执行此操作。它们需要比图层 div 具有更高的 z-index。

最后是吉他：它们可以只是两个图层 div 中的每一个的背景图像，甚至是图像，这取决于你。只是不要忘记让顶层具有更大的 z-index。

为了清除它，这里是伪结构：

<div> Main div that contains the bg image
    <div> First layer div with the first guitar image (Duo-Sonic)
        <div> Div (or <img>) with the blur image floating on the right
    </div>
    <div> Second layer div with the second guitar image and has a higher z-index than the first layer div (Jaguar)
        <div> Div (or <img>) with the blur image floating on the right
    </div>
</div>
于 2013-06-17T11:44:32.430 回答