pergunta Jquery fim animado

Question

Então eu tenho um logotipo que muda seu fundo em MouseHover, eu estou tentando ter 5 fundos diferentes, cada um exibido em um MouseHover, não randomizado e de volta para o primeiro plano quando o 5º MouseHover é feito. Como posso conseguir isso?

Aqui está o script jQuery

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

eo 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:

Eu segui Scott M. conselhos e tenho esse código:

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

É provavelmente faltando alguma coisa ...

Mas o problema é que eu não sei como adicionar os outros divs (logo1, logo2, logo3, e logo4) com as respectivas imagens e mantenha então invisível até a sua a sua vez em MouseHover, qual é a melhor maneira? display:? nenhuma

Answer 1

Você pode manter um contador (por exemplo bgnum) e concatenar-lo com um nome de arquivo para obter cada fundo. Então em foco você definir o css usando

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

então incrementar o contador, e mod por 5 para que ele nunca vai passado o número de plano de fundo que você tem.

bgnum = (bgnum + 1) % 5;