[SOLVED] Add a jQuery Effect to a Plain JS Function

Add a jQuery Effect to a Plain JS Function

I am quite new at jQuery (in fact, new to JS too) and I am trying to add a fade in effect to a JS function which I wrote to change images in a photo gallery when the "thumbnail" of another image is selected. Code is:

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

I'd like to add a jQuery Fade Out effect for the previous image displayed, and the Fade In for the last selected image once the function is fired. But I am not finding a way to mix the JQuery Code with the plain JS... How could I call only the jQuery function without need to target it to the same element again?

Thanks in advance for any help.

Solution

Try this:

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