JQuery - .animate <img/>

Question

早上好先生。计算器。

2 img之间是否有可能.animate？比如，改变img src＆amp;淡入新的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

感谢您的支持 - 这是一个很好的第一个十月！

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

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

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

Answer 3

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