Jquery animate order question

Question

So I've got a logo that changes its background on mousehover, I'm trying to have 5 diferent backgrounds, each one displayed on a mousehover, not randomized and back to the first background when the 5th mousehover is done. How can i achieve this?

Here's the jquery script

$(document).ready(function(){
  $("#logo").hover(
  function() {
    $(this).stop().animate({"opacity": "0"}, "slow");
  },
  function() {
    $(this).stop().animate({"opacity": "1"}, "slow");
  });
});

and the css

div#logo{
    background-image:url(../images/logo.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:12;
}

div#logo_hover{
    background-image:url(../images/logo_hover_blue.png);
    background-repeat:no-repeat;
    width:216px;
    height:235px;
    position:absolute;
    right:45px;
    top:5px;
    z-index:11;
}

EDIT:

I've followed Scott M. advice and got this code:

$("#logo").click(function () {
  var color = $(this).css("background-image", "background" + bgnum + ".png");
});

It's probably missing something...

but the problem is I dont know how to add the other divs (logo1, logo2, logo3, and logo4)with their respective images and keep then invisible until its their turn on mousehover, what's the best way? display:none?

Answer 1

you can maintain a counter (e.g. bgnum) and concatenate it with a file name to get each background. Then on hover you set the css using

.css("background-image", "background" + bgnum + ".jpg")

then increment the counter, and mod by 5 so it never goes past the number of background that you have.

bgnum = (bgnum + 1) % 5;