JQuery backgroundcolor changes (either .animate or .css) only work once after restart?

Question

Hi everyone I've got a huge issue that I don't quite understand why it's happening.

The thing is, I got the jquery plugin jquery.color so that I could change 4 div's color alternately each 6 seconds so that when the first one is white, the others are black, when the second is white the others are black and so forth.

When I started out programming it everything was working and I thought I was making progress but I tried it again and nothing... I decided that maybe it was the jquery color plugin's fault so I decided to give jquery UI plugin a go. I emptied the caches and restarted the mac, tried the "new" plugin and it was working again so I started to program a little more, tried it again and BAM same thing happens...

The weird thing is that the exact same code works after a restart but does not work a second time...

I've got the following jquery plugins on use: jquery.urlrewrite, jquery.easytabs, jquery.ae.image.resize and of course jquery-ui.

The small snippet of .JS code that I am using for testing purposes is:

var intervalo = window.setInterval(caneco, 6000);

function caneco(){


$("#triangulo").animate({
top: "120px"
}, 1000 );

$("#juntaimg").animate({
left: "-451px"
}, 1000 );

$("link1").animate({
  'background-color': "black"
}, 1000);


}

Weirdest of all, all other animations aside from backgroundColor changes work perfectly and everytime...

Can anyone help me out?? Please??

Answer 1

Well for anyone that has this problem it was due to a conflict between the index.php and the update.php which was being loaded using jquery's .load into a div. Since I developed everything independently and afterwards joined it I had jquery 1.7.1 being loaded two times, had some php scripts being loaded twice and so on... So basically I solved it all by using a restrained .load like this:

$("#finalcontainer").load("updates.php #initialcontainer");

and then I just moved all the css of that page to the index css file (I know I should have done it already but that bug was killing me!) and also I moved all the .js animations of updates.php to the index.php.

So that's how I squashed my bug. And mainly it was my fault all along...

Answer 2

Here's a fully working jsFiddle:

• http://jsfiddle.net/VjFMj/

I corrected / changed it a bit (eg intervals and the animation descriptions) but that should not be a major thing - if it works, your code should work.

If this works for you and your local version doesn't, try making a small example like this - just include the jQuery and jQuery UI and the code from the jsFiddle and see if that works. If it does, it's probably some typo / missed tag or any other syntax error that's making it not work.

Btw, you probably want setTimeout instead of setInterval , as the latter will repeat the call every n milliseconds, while setTimeout runs it once.