jquery script only works in firefox

Question

I am using this jquery script to create a small slideshow between .jpg's the problem is it only works on firefox, not safari , not chrome , not opera... any ideas?

<script type='text/javascript'>
$(document).ready(function() {
   slideShow();
 });
function slideShow(){
var current = $('#animation .show');
var next = current.next() .length ? current.next() : current.parent() .children(':first');
current.hide() .removeClass('show');
next.fadeIn() .addClass('show');
setTimeout(slideShow, 2000);
}
</script>

Answer 1

Jquery was designed to be cross browser, making it a lot simpler for developers!

I see that the script is probably internal on your page, have you tried clearing the caches of other browsers to make sure any dependant scripts are loaded properly?

Also do you have any browser specific code? Along the lines of, if browser = IE, use some of this code. This can conflict with other pieces of code on your page.

Other than that, make sure you are of course running the same file and not an older version (I've done this before!)

Answer 2

I tried to reproduce your code. Created a simple HTML page:

<div id="animation">
    <img class="show" src="http://www.ewatching.nl/wp-content/uploads/2010/10/google_logo_3.jpg" />
    <img src="http://thenextweb.com/nl/files/2010/01/google.jpg" />
    <img src="http://www.descherpepen.nl/wp-content/uploads/2010/06/google.jpg" />
    <img src="http://images.retecool.com/uploads/reet-google_chrome.jpg" />        
</div>

with some css (not ideal, but it does the trick)

<style type="text/css">
    #animation > img
    {
        display:none;
        visibility:hidden;
    }
    .show 
    {
        display: block !important;
        visibility:visible !important;
    }
</style>

Then I use your script to create the slideshow. It works in IE, Opera, Firefox and Safari.

The problem isn't your script. Perhaps your html and css? Can you post those?

Answer 3

Is it something to do with the spaces in your statements? For example, instead of

current.hide() .removeClass('show'); 

perhaps try

current.hide().removeClass('show');

And so on for your code? Just a thought!