Как добавить эффект выцветания или перехода изображений с помощью jQuery?

Question

У меня есть только один <img> Элемент на моей странице. Я меняю src Атрибут этого изображения каждые 7 секунд.

Я вижу новые изображения каждые 7 секунд, но было бы лучше, если бы я мог добавить некоторый эффект замирания или переходов при загрузке нового изображения.

У некоторых есть простой сценарий для этого?

Мне не нужен плагин. Просто нужна подсказка или несколько линий образца для этого.

Answer 1

Несмотря на то, что упомянул Кайкин, вы можете использовать способность jQuery обратить внимание, чтобы исчезнуть/из -за изображения, пока вы его меняете. Это можно сделать так: http://www.jsfiddle.net/bradchristie/hskpq/1/

$('img').fadeOut('slow',function(){
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow');
});

Answer 2

Вы захотите использовать два изображения:

<img id="backImg" />
<img id="frontImg" />

Установлен #backImg быть позади #frontImg вот так:

#backImg
{
    position: absolute;
}

Затем, в вашем коде, который стреляет каждые 7 секунд, исчезайте переднее изображение ... это автоматически сделает ваш эффект CrossFade, потому что обратное изображение уже загружено за ним. Когда затухание будет сделано, установите источник переднего изображения на SRC обратного изображения, покажите его и предварительно загрузите следующее изображение в заднее изображение:

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}

Все это предполагает, что ваши изображения одинаковы размером. Если нет, то вы захотите быть немного более сложным с CSS и обернуть изображения в DIV, которые исчезают.

Answer 3

Вы не можете сделать это только с одним изображением.

Проверь это:

    <div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

            <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

            <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

            <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

            <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
    var i = 0;
    $('#himg img').each(function(){
        if(i == 0)
        {
            $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />');

        }
        if(i == 1)
        {
            $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />');
        }
        i ++;

        slide.arr.push($(this).attr('src')); 
    });

    setTimeout(function(){
        if(slide.arr.length < 2)
            slide.fade(0);
        else
            slide.fade(2);
    }, 3000);
});

var slide = {
    arr: Array(),
    fade: function(i)
    {
        $('#main_over').fadeOut("medium");
        setTimeout(function(){slide.next(i);}, 1000);
    },
    next: function(i)
    {
        $('#main_over').html($('#main_img').html());
        $('#main_over').css('display', 'block');

        $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />');

        i++;
        if(i >= slide.arr.length)
            i = 0;

        setTimeout(function(){slide.fade(i);}, 3000);
    }
}

</script>