Here my script : http://jsfiddle.net/3XwZv/153/

HTML

<div id="box1" class="choice" style="background:blue;">
    <div class="selection ordinateur">
        <div class="choix1"><a class="link1" href="#"></a></div>
    </div>
</div>

<div id="box2" class="choice" style="display:none;background:red;">
    <div class="selection ordinateur">
        <div class="choix1"><a class="link2" href="#"></a></div>
    </div>
</div>


<div id="box3" class="choice" style="display:none;background:green;">
    <div class="selection ordinateur">
        <div class="choix1"><a href="#"></a></div>
    </div>
</div>

JS

$(".link1").click(function() {
    $('#box1').fadeOut("slow", function(){
        $('#box2').css("display","block");
        $('#box2').replaceWith(div);

       $('#box1').fadeIn("slow");
    });
    $('.link1').fadeOut("slow");
    return false;
});


$(".link2").click(function() {
    $('#box2').fadeOut("slow", function(){
        $('#box3').css("display","block");
        $('#box3').replaceWith(div);

       $('#box2').fadeIn("slow");
    });
    $('.link2').fadeOut("slow");
    return false;
});

The main goal is that when you click on the giant square, I have three differents action. However, in Internet Explorer I block to the second. (the red square does not go to the green square).
Please I need your help guys!