JQuery - .animate <img>

Question

Утро г-н. Stackoverflow.

Можно ли оживить между 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

Спасибо за помощь - и хорошего 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>

Answer 2

Это невозможно только с одним элементом 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 3

Вы можете создать одиночный фон (содержащий оба изображения) и анимировать положение фона . Вот демоверсия (и статья здесь , если вам интересно).