Hinzufügen eines JQuery-Effekts zu einer Plain JS-Funktion

Question

Ich bin ziemlich neu bei JQuery (tatsächlich auch neu in JS) und versuche, einen Fade-In-Effekt zu einer JS-Funktion hinzuzufügen, die ich zum Ändern von Bildern in einem Foto geschrieben habe Galerie, wenn das "Vorschaubild" eines anderen Bildes ausgewählt ist. Code ist:

//For HTML - the "thumbs" area: 

<img id="g1" class="thg" onclick="trocafoto(this.id)"  src="fotos/sopa.jpg"> 
<img id="g2"class="thg" onclick="trocafoto(this.id)" src="fotos/salmao.jpg">//and so on 

//The place where pictures are displayed: 

<img class="portif" id="alvo" src="fotos/sopa.jpg"> 

//The JS Function itself: 

function trocafoto(id) { 
    var x = document.getElementById(id).src ; 
    document.getElementById("alvo").src = x; 
    } 

Ich möchte eine JQuery Fade Out Effekt hinzufügen für das vorherige Bild angezeigt, und das Aufblenden für die zuletzt gewählte Bild, sobald die funcion abgefeuert wird. Aber ich finde keinen Weg, den JQuery-Code mit dem JS-JS zu vermischen ... Wie kann ich nur die JQuery-Funktion aufrufen, ohne sie erneut auf dasselbe Element auszurichten?

Vielen Dank im Voraus für jede Hilfe.

Answer 1

Versuchen Sie folgendes:

var $alvo = $('#alvo'); 
 
$('.thg').on('click', function(){ 
 
    var clickedImgSrc = $(this).attr('src'); 
 
    // first hide alvo 
 
    $alvo.fadeOut("slow", function() { 
 
     // fadeOut Animation is complete. 
 
     // Add the new src to alvo and fadeIn 
 
     $(this).attr('src', clickedImgSrc).fadeIn(); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="g1" class="thg" src="fotos/sopa.jpg"> 
 
<img id="g2" class="thg" src="fotos/salmao.jpg"> 
 

 
<img class="portif" id="alvo" src="fotos/sopa.jpg">

Answer 2

Statt dieser

document.getElementById("alvo") 

können Sie ein Element erreichen zum Beispiel unter Verwendung von

$("#alvo") 

So in Ihrem Fall

$("#alvo").fadeOut(); 

funktionieren würde.

Answer 3

Wenn Sie Thumbnails verwenden als wahrscheinlich Sie Bilder mit höherer Auflösung haben zu.
Das ist gut für schnelleres Laden von Seiten! Also in diesem Fall speichert der höhere Bildqualität Pfad in einem data-* Attribute wie:

var $alvo = $("#alvo"); // The larger target image 
 

 
$(".thg").on("click", function(){ 
 
    // First, make sure the HQ image is loaded from the server 
 
    var img = new Image(); 
 
    $(img).on("load", function(){ 
 
     // Than assign it to #alvo 
 
     $alvo.hide().prop("src", img.src).fadeIn(); 
 
    }); 
 
    // getting the path from data attribute of the clicked thumbnail 
 
    img.src = this.dataset.hq; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img class="thg" src="//placehold.it/60x60/cf5" data-hq="//placehold.it/400x200/cf5"> 
 
<img class="thg" src="//placehold.it/60x60/f5c" data-hq="//placehold.it/400x200/f5c"> 
 
<br> 
 
<img id="alvo" src="//placehold.it/400x200/cf5">

Wenn Sie nicht das Laden Bild Verzögerung wollen, als Sie in einer Schleife all HQ Bilder vorladen könnten , aber das trotzt dem Zweck der schnelleren Seitenladung. Eine Abhilfe könnte das Hinzufügen eines Ladedrehfelds sein, wenn auf ein Miniaturbild geklickt wird.