JQuery увядает с новым изображением

Ответ 1

В простейшем случае вам потребуется использовать обратный вызов при вызове fadeOut().

Предполагая, что на странице уже есть тег изображения:

<img id="image" src="http://sstatic.net/so/img/logo.png" />

Вы передаете функцию в качестве аргумента обратного вызова fadeOut(), которая сбрасывает атрибут src, а затем исчезает с помощью fadeIn():

$("#image").fadeOut(function() { 
  $(this).load(function() { $(this).fadeIn(); }); 
  $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
}); 

Для анимаций в jQuery обратные вызовы выполняются после завершения анимации. Это дает вам возможность последовательно группировать анимации. Обратите внимание на вызов load(). Это гарантирует, что изображение загрузится до того, как оно исчезнет (спасибо Y. Shoham).

Вот рабочий пример

Ответ 2

Ну, вы можете поместить следующее изображение за текущее, и fadeOut текущего, чтобы оно выглядело так, как будто оно исчезает в следующем изображении.

Когда затухание сделано, вы меняете изображения назад. Так грубо:

<style type="text/css">

.swappers{
    position:absolute;
    width:500px;
    height:500px;
}

#currentimg{
    z-index:999;
}

</style>

<div>
    <img src="" alt="" id="currentimg" class="swappers">
    <img src="" alt="" id="nextimg" class="swappers">
</div>

<script type="text/javascript">
    function swap(newimg){
        $('#nextimg').attr('src',newimg);
        $('#currentimg').fadeOut(
            'normal',
            function(){
                $(this).attr('src', $('#nextimg').attr('src')).fadeIn();
            }
        );
    }
</script>

Ответ 3

$("#main_image").fadeOut("slow",function(){
    $("#main_image").load(function () { //avoiding blinking, wait until loaded
        $("#main_image").fadeIn();
    });
    $("#main_image").attr("src","...");
});

Ответ 4

Вы уверены, что используете callback, который вы передаете в fadeOut, чтобы изменить исходный attr, а затем вызвать fadeIn? Вы не можете последовательно вызывать fadeOut, attr() и fadeIn. Вы должны дождаться завершения fadeOut...

Ответ 5

Для тех, кто хочет, чтобы изображение масштабировалось в соответствии с процентом ширины (которое масштабируется в соответствии с шириной вашего браузера), очевидно, что вы не хотите устанавливать высоту и ширину в PIXEL в CSS.

Это не лучший способ, но я не хочу использовать какой-либо JS-плагин.

Итак, что вы можете сделать:

• Создайте прозрачный PNG такого же размера и поместите в него ID второй-баннер
• Назовите свое исходное изображение первым баннером
• Поместите оба из них под DIV

Вот структура CSS для вашей справки:

.design-banner {
    position: relative;
    width: 100%;
    #first-banner {
       position: absolute;
       width: 100%;
    }
    #second-banner {
       position: relative;
       width: 100%;
    }
}

Затем вы можете спокойно погасить свой оригинальный баннер без содержимого, которое было размещено после перемещения изображения и мигания вверх и вниз

Ответ 6

Старый вопрос, но я думал, что напишу ответ. Я использую это для большого изображения заголовка на домашней странице. Хорошо работает, манипулируя z-index для текущего и следующего изображений, показывает следующее изображение прямо под текущим, затем исчезает текущее.

CSS

#jumbo-image-wrapper
{
    width: 100%;
    height: 650px;
    position: relative;
}

.jumbo-image
{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

HTML:

<div id="jumbo-image-wrapper">
    <div class="jumbo-image" style="background-image: url('img/your-image.jpg');">
    </div>
    <div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;">
    </div>
</div>

Javascript (jQuery):

function jumboScroll()
{
    var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length;

    var next_index = jumbo_index+1;
    if (next_index == num_images)
    {
        next_index = 0;
    }

    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10");
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9");
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show();
    $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow");

    jumbo_index = next_index;

    setTimeout(function(){
        jumboScroll();
    }, 7000);
}

Он будет работать независимо от того, сколько "слайдов" с классом. jumbo-image находятся в div # jumbo-image-wrapper.