How can I fade a transition to move on to another

Question

In javascript;

function doSingle() {
var luck = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    imagesArray = ['th/sr/1.png', 'th/sr/2.png', 'th/sr/3.png'];
  var ssrArray = ['th/ssr/1.png', 'th/ssr/2.png', 'th/ssr/3.png']; 
  lucknumber = Math.floor((Math.random() * luck.length));

  if (lucknumber < 8) { 
    //HERE IS WHERE I WANT THE FADE :)
    function displayImage() {
      var num = Math.floor(Math.random() * ssrArray.length);
      window.canvas.src = ssrArray[num];
    }

    displayImage();
  } else {
    //HERE IS WHERE I WANT THE FADE :)
    function displayImage() {
      var num = Math.floor(Math.random() * imagesArray.length);
      window.canvas.src = imagesArray[num];
    };

    displayImage();
  }
} 

Where can you see HERE IS WERE I WANT THE FADE :)if there is a way for it to display the image for 2 seconds and then disappear into the randomized image? thank

Answer 1

The easiest way is to use jQuery:

$("#myImage").fadeIn();
$("#myImage").fadeOut();