Simply javascript jQuery code working in Chrome, not Firefox, Safari, IE

I have a simple bit of jQuery code:

<script type="text/javascript">
$(document).ready(function() {
    // fade in content.
    $('.coming_soon').fadeIn(5000);
    });
</script>

Website: Classic Car Gallery Test

It works quite nicely in Chrome with the "coming soon" image fading in nicely.开发者_JS百科 Unfortunately this does not work in Firefox, Safari, and IE. What have I done wrong? Any input, advice or code snippets would be much appreciated.

I think your image is shown before you call fadeIn. putting some css to hide your image (display:none on .coming_soon) should do the trick

$('.coming_soon').hide().fadeIn(5000);

You have to hide it first :)

display:none would be better solution than .hide() as it happens before JS is loaded

http://jsfiddle.net/Jacek_FH/z3tpS/1/

Jquery is a crossbrowser framework, so should work fine. Make sure your .coming_soon tag is set to display:none; in your css.

e.g.

.coming_soon {display:none;}