Question

<script type="text/javascript" src="css/jquery-1.7.1.js"></script>


<script type="text/javascript">


function slidedown(id){

$('#rerooftext').hide(0);
$('#inspectiontext').hide(0);
$('#remodelingtext').hide(0);
$('#restorationstext').hide(0);
$('#commtext').hide(0);
$('#painttext').hide(0);

setTimeout(300);
$('#'+id.id+'text').fadeToggle(1000);

};
</script>

Here I have a function that hides several divs that contain text, and then show the div for the clicked link, using jquery functions. This code works great in chrome, but internet explorer does not perform the animation, when I click the link it hides the current div which is reroof but fails to show the new div, which is the code $(‘#’+id.id+’text’).fadeToggle(1000);

Any ideas why this could be happening?

Answer 1

It is because there is a bug in your code at setTimeout(300); because of which execution does not reach till the line where you perform fade animation.

setTimeout takes 2 arguments. First is the function pointer or a string containing the code to execute, second argument is the time in milliseconds after which the specified function or code to execute.

Comment that line because it is useless and try it will work. If you want to delay the animation for some time you can take a look at jQuery delay.

function slidedown(id){

   $('#rerooftext').hide(0);
   $('#inspectiontext').hide(0);
   $('#remodelingtext').hide(0);
   $('#restorationstext').hide(0);
   $('#commtext').hide(0);
   $('#painttext').hide(0);

   //setTimeout(300);

    $('#'+id.id+'text').fadeToggle(1000);

};