jQuery - .animate <img>答案

【问题标题】：JQuery - .animate <img>jQuery - .animate <img>
【发布时间】：2011-05-18 08:37:22
【问题描述】：

早上好，先生。堆栈溢出。

是否可以在 2 个 img 之间进行 .animate ？比如，改变 img src 并淡入淡出到新的 img src？

HTML

<img class="classimg" src="images/example.png" />

我的伪 jquery/javascript 代码：

On Click
    Animate .classimg height 50 width 100 opacity 1, 600
    Animate .classimg height 200 width 450, 400
    Animate .classimg change img src to url(images/example_with_green.png), 700

感谢您的付出 - 祝您在 12 月 1 日顺利！

【问题讨论】：

标签： javascript jquery animation png image

【解决方案1】：

仅使用单个 HTML img 元素是不可能的。您可以做的是动画/淡入淡出叠加的图像。一个淡入另一个淡出。

jQuery animate() 函数只能为立体 CSS 样式设置动画。要同时允许彩色动画，您必须使用 jQuery UI 效果。但是开箱即用不支持两个图像源。

像这样将所有图像放在同一个 DIV 容器中：

<div style="position:relative;">
    <img src="..." style="position:absolute;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
    <img src="..." style="position:absolute;display:none;" />
</div>

然后循环浏览这些图像并根据需要制作动画。

【讨论】：

感谢您的描述。我看到一些问题，即 JQuery 无法自然地为背景颜色、边框设置动画——它们的其他东西是 JQuery 不原生支持的吗？ . )
@Mr. Freeman：这就是为什么我说你应该在这些特殊动画中使用 jQuery UI 动画。仅限 jQuery animate() 动画尺寸样式。 border-width 是其中之一。但当然不是border-color。

【解决方案2】：

正如罗伯特所说，你可以做的是：

<script type="text/javascript">

        $(function () {
            // find the div.fade elements and hook the hover event
            $('div.fade').hover(function() {
                // on hovering over find the element we want to fade *up*
                var fade = $('> div', this);

                // if the element is currently being animated (to fadeOut)...
                if (fade.is(':animated')) {
                    // ...stop the current animation, and fade it to 1 from current position
                    fade.stop().fadeTo(1000, 1);
                } else {
                    fade.fadeIn(1000);
                }
            }, function () {
                var fade = $('> div', this);
                if (fade.is(':animated')) {
                    fade.stop().fadeTo(1000, 0);
                } else {
                    fade.fadeOut(1000);
                }
            });
        });

    </script>

还有 HTML：

    <div class="fade">
            <img src="logo.png" alt="Who we are" />
            <div>
                <img src="logoalt.png" alt="Who we are" />
    </div>
</div>

【讨论】：

这上面的 CSS 怎么样？ '.fade > div' 是否需要为“display: none; position: relative; opacity: 0”才能让它们相互叠加动画？

【解决方案3】：

您可以制作单一背景（包含两个图像），并为背景位置设置动画。 Here's the demo（还有article here，如果你有兴趣的话）。

【讨论】：

使用精灵不允许褪色，就像 OP 要求的那样。
带淡入淡出？我不这么认为。您链接的示例中的淡入淡出只是渐变。不可能处理两个 300 像素大小的图像。您必须创建所有淡入淡出动画帧。这个想法很酷，但不是为了这个目的。