javascript - JQuery - .animate <img>

Question

早安先生。堆栈溢出。

是否可以在 2 个 img 之间制作动画？比如，将 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

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

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