Как реализовать появление картинки, когда другая еще не изчезла?

Question

[andreyqin]

Есть простой код смены картинок при нажатии на кнопки. Пример - jsfiddle.net/VJZzJ/2
Вопрос в том, как достичь анимации как тут, когда следующая картинка плавно появляется еще до исчезновения предыдущей.

Answer 1

[maxaon]

Почему бы не взять и скачать файл? 55 строчек, из которых 16 - коментарии.
По делу - имеется фон с предыдущей картинкой.

Comments

[andreyqin]

Спасибо за подсказку. Вот пример реализации - jsfiddle.net/VJZzJ/5 . В данном примере немного заметна смена фона, т.к. картинки такие, но на сайте, при смене баннеров, все ок.

Answer 2

[akashtrih]

Нужно сделать так, чтобы когда исчезает одна картинка, за ней уже есть другая. Эффект появления картинки вовсе будет не нужен.

Answer 3

[DarkChris]

Немного топорно на скорую руку писал. Главное суть :)
вставить этот ЖС сюда jsfiddle.net/VJZzJ/2

$('.buttons').on('click', 'span', function() {
    var src = $(this).data('src');
        imgSrc = $('.banners img').attr('src');
    $('.banners').css({
        'background-image':'url(' + imgSrc + ')',
        'background-size':'300px 300px',
        'width': '300px',
        'height' : '300px'
    });
    if (src != $('.banners img').attr('src')) {
        $('.banners img').animate({opacity: 0}, 200, function() {
            $(this).attr('src', src).animate({opacity: 1}, 700);
        });
    } else {
        return false;
    }
});