jQuery fade a nuova immagine

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.

Nel caso più semplice, dovrai utilizzare una richiamata sulla chiamata a fadeOut () .

Supponendo un tag immagine già presente nella pagina:

 

Si passa una funzione come argomento di callback a fadeOut() che reimposta l’attributo src e quindi si dissolve nuovamente usando fadeIn() :

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

Per le 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).

Ecco un esempio funzionante

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

Bene, puoi posizionare l’immagine successiva dietro quella corrente e sfumare in dissolvenza quella attuale in modo che assomigli all’immagine successiva.

Al termine dello sbiadimento, si scambiano nuovamente le immagini. Quindi all’incirca:

  

Sei sicuro di usare il callback che passi in fadeOut per cambiare la fonte attr e poi chiamare fadeIn ? Non è ansible chiamare fadeOut , attr() e fadeIn sequenzialmente. Devi attendere fadeOut per completare …

Vecchia domanda ma ho pensato di dare 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:

 

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à indipendentemente dal numero di “diapositive” con class .jumbo-image nel # jumbo-image-wrapper div.

Per coloro che vogliono che l’immagine sia in scala in base alla percentuale di larghezza (che scala in base alla larghezza del browser), ovviamente non si desidera impostare altezza e larghezza in PIXEL in CSS.

Questo non è il modo migliore, ma non voglio usare nessuno dei plugin JS.

Quindi, cosa puoi fare è:

  1. Crea un PNG trasparente della stessa dimensione e inserisci un ID come secondo banner
  2. Assegna un nome all’immagine originale come primo banner
  3. Metti entrambi sotto un DIV

Ecco la struttura CSS per il tuo riferimento:

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

Quindi, puoi svanire in tutta sicurezza il tuo banner originale senza il contenuto che è posto dopo che l’immagine si muove e lampeggia in su e in giù