jQuery fade a new image

Question

Come posso dissolvere un'immagine in un'altra con jQuery? Per quanto posso dire che useresti fadeOut, cambia la sorgente con attr() e poi fadeIn di nuovo. Ma questo non sembra funzionare in ordine. Non voglio usare un plugin perché mi aspetto di aggiungere alcune modifiche.

Grazie.

Answer 1

Nel caso più semplice, è necessario utilizzare un callback sulla chiamata alla fadeOut().

Ipotizzando un tag di immagine già sulla pagina:

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

si passa una funzione come argomento di callback per fadeOut() che reimposta l'attributo src e poi si affievolisce indietro con fadeIn():

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

Per animazioni in jQuery, i callback vengono eseguiti al termine dell'animazione. Questo ti dà la possibilità di concatenare le animazioni in sequenza. Notare la chiamata a load(). Questo assicura che l'immagine sia caricata prima di riapparire (grazie a Y. Shoham).

Here's a working example

Answer 2

Sei sicuro di utilizzare lo callback per passare a fadeOut per cambiare la fonte attr e quindi chiamare fadeIn? Non è possibile chiamare in sequenza fadeOut, attr() e fadeIn. È necessario attendere fadeOut per completare ...

Answer 3

Beh, è ​​possibile inserire l'immagine successiva dietro quella corrente, e fadeOut quella corrente in modo che sembra come se si sta svanendo nella immagine successiva.

Quando la dissolvenza è terminata, si scambiano di nuovo le immagini. Così più o meno:

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

Answer 4

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

Answer 5

Per chi vuole l'immagine in scala in base alla larghezza percentuale (che scala secondo la vostra larghezza del browser), ovviamente non si desidera impostare l'altezza e la larghezza in pixel in CSS.

Questo non è il modo migliore, ma non voglio usare nessuno dei plug-in JS.

Che cosa si può fare è:

1. Creare uno stesso formato PNG trasparente e mettere un ID ad essa come secondo-banner
2. Nome vostra immagine originale come primo-banner
3. Inserisci entrambi sotto un DIV

Ecco la struttura CSS per te r di riferimento:

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

Poi, si può tranquillamente fade out il tuo banner originale senza il contenuto che ha posto dopo la vostra immagine in movimento e lampeggiante su e giù

Answer 6

vecchia questione, ma ho pensato di buttarmi in una risposta . Lo uso per l'immagine di intestazione grande su una homepage. Funziona bene manipolando lo z-index per le immagini attuali e successive, mostra l'immagine successiva proprio sotto quella corrente, quindi attenua quella attuale.

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); 
} 

Funzionerà Matt er quante "diapositive" con classe .jumbo-image si trovano nel # jumbo-image-wrapper div.