JQuery - .animate <img>

Question

早上好先生。Stackoverflow。

是否可以在2个img之间执行.animate？例如，将img src & fade更改为新的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日过得很愉快！

Answer 1

正如Robert所说，你能做的是：

<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>

Answer 2

只有一个HTML img元素是不可能做到的。你可以做的是动画/淡入淡出叠加的图像。一个淡入另一个淡出。

jQuery CSS函数只能对维度animate()样式进行动画处理。要使用彩色动画，您必须使用jQuery UI effects。但不支持开箱即用的两个图像源。

将所有图像放在相同的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>

然后循环浏览这些图像，并适当地制作动画。

Answer 3

您可以创建一个单个背景(包含两个图像)，并设置背景位置的动画。Here's the demo (还有article here，如果你感兴趣的话)。