I would like to implement a fadeOut effect for a new web project and so I decided to append a layer-div via javascript to lay over the real content and wanted to fadeOut this element at the top of my $(document).ready() function. I did choose the JS solution in order to make the project work fine even if JS is not activated.
So at first I had this code snippet:
var over_main = document.createElement('DIV');
overmain.setAttribute("id","over_main");
document.body.appendChild(over_main);
And in my document.ready() function:
$("#overmain").fadeOut(2000);
Works fine in any browser, but in Google Chrome the fadeOut does not work. The Layer did not disappear.
At first I implemented a hack to hide the layer-div via callback function :
$("#overmain").fadeOut(2000,function(){$(this).hide();});
The result was an ugly blinking effect but I could not find another solution to hide the layer.
Going on in my code an playing around with reading out the UA to add some browser switches I added a new debugging alert before appending the layer-div to the markup:
alert('check this');
var over_main = document.createElement('DIV');
overmain.setAttribute("id","over_main");
document.body.appendChild(over_main);
For my surprise as a result the fadeOut works fine in Google Chrome with this alert message but as soon as I delete it, it fails again.
Has anyone an idea how I can solve this problem without an alert?
Thanks a lot
Andy