Animation in show and hiding of div elements using jquery or qjax

Question

I searched a lot of similiar questions on stackoverflow but to no avail of my solution..

I successfully implemented a code with your help guys and i thank you all for your help.. now i require to learn ho to animate the hiding of the divs..

I have some divs which are shown on the loading of the page.. now those divs are based on values of some radio buttons.. on clicking one button there is a particular div now i have two problems.

1. I used id attribute so it does not show duplicate content (How can i solve that?)
2. I want to animate the hiding of the divs.. how can i do that?

here is the fiddle http://jsfiddle.net/qudT2/

jQuery code:

$(document).ready(function() {
$("input[name$='type']").click(function() {
    var test = $(this).val();
    $("div.imgDisp").hide();
    $("#" + test).show();
});
});

Answer 1

$(document).ready(function() { 
    $("div.imgDisp").hide();
    $('[id="' + $(":radio:checked").val()+'"]').show();
    $(":radio").click(function() {      
        $("div.imgDisp").fadeOut('slow');
        $('[id="' + $(this).val()+'"]').fadeIn('slow');
    });
});

for DEMO