Javascript fade image in and out.

Question

I am fairly new to JavaScript and i need a very simple script to fade an image in and out slowly on a loop. Any help would be much appreciated.

Answer 1

The easiest way would be using jQuery:

<img src="..." id="myImage">


<script type="text/javascript">
jQuery(function(){

   // Fade In
   $("#myImage").fadeIn();

   // Fade Out
   $("#myImage").fadeOut();

});
</script>

Documentation: http://api.jquery.com/fadeIn/

You can also change the fade duration by passing a parameter

 // predefined slow (200ms)
 $("#myImage").fadeOut("slow");

 // predefined fast (600ms)
 $("#myImage").fadeOut("fast");

 // 1500 ms
 $("#myImage").fadeOut(1500);

---

Update creating a loop:

function fadeIn()
{
   $(this).fadeIn( fadeOut );
}

function fadeOut()
{
   $(this).fadeOut( fadeIn );
}

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

Answer 2

There is a fadein function in jQuery

$('#imgName').fadeIn('slow');

Answer 3

Its an image behind another image, a sort of glow so i need it to fade in and out and repeat. how would i implement that using jquery?

Answer 4

This one works great but what is the syntax to assign a speed to each fade?

    function fadeIn()
{
   $(this).fadeIn( fadeOut );
}

function fadeOut()
{
   $(this).fadeOut( fadeIn );
}

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