Q:

toggle two images by fading

How can I toggle two images by fading using jQuery .fadeToggle method.

A:

You must put the 2 elements you want to crossfade one on top of the other by using position:absolute;. You begin by hiding one. To make a crossfade, you just run simultaneously a fadeToggle() on each of the 2 elements.
The HTML:
<div id="d1" style="background-color:red;"></div>
<div id="d2" style="background-color:blue;"></div>
<span>Click</span>

The CSS:
#d1, #d2 {position:absolute;
    top:12px;
    left:12px;
    width:120px;
    height:120px;}

span {position:absolute;
    top:200px;
    left:12px;
    cursor:pointer;}

The Javascript:
$(document).ready(function(){
  $("#d1").show();
  $("#d2").hide();
  $("span").click(function(){ // For demo's sake we attach the crossFade to a click event.
    $("#d1").fadeToggle(500);
    $("#d2").fadeToggle(500);
  });
});

