Wie füge ich mit JQuery einen Verblassen- oder Bildübergangseffekt hinzu?

Question

Ich habe nur einen <img> Element auf meiner Seite. Ich ändere die src Attribut dieses Bildes alle 7 Sekunden.

Ich sehe die neuen Bilder alle 7 Sekunden, aber es wäre schöner, wenn ich beim Laden eines neuen Bildes einen Verblassen- oder Übergangseffekt hinzufügen kann.

Hat einige ein einfaches Skript dafür?

Ich brauche kein Plugin. Benötigen Sie nur einige Hinweise oder einige Probenlinien dafür.

Answer 1

Trotz dessen, was Kaiqing erwähnt hat, können Sie die Callbacks -Fähigkeit von JQuery verwenden, um das Bild zu verblassen, während Sie es ändern. Dies kann so erfolgen: http://www.jsfiddle.net/bradchristie/hskpq/1/

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

Answer 2

Sie möchten zwei Bilder verwenden:

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

Satz #backImg dahinter sein #frontImg Like SO:

#backImg
{
    position: absolute;
}

In Ihrem Code, der alle 7 Sekunden abfeuert, verblassen Sie dann das Frontbild ... Dies führt automatisch Ihren Crossfade -Effekt aus, da das Rückbild bereits dahinter geladen ist. Wenn der Fade fertig ist, stellen Sie die Quelle des Frontbildes auf das SRC des hinteren Bildes, zeigen Sie es und laden Sie das nächste Bild in das hintere Bild vor:

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

Dies alles geht davon aus, dass Ihre Bilder identisch dimensioniert sind. Wenn nicht, möchten Sie mit dem CSS nur ein bisschen ausgefeilter sein und die Bilder in Divs einwickeln, die ausblenden.

Answer 3

Sie können dies nicht mit nur einem Bild tun.

Überprüfen Sie das:

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