Compatibility jquery with IE - click function and fade
- by Julien Fotnaine
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!
