domanda Jquery ordine animate

Question

Quindi ho un logo che cambia il suo background sul MouseHover, sto cercando di avere 5 sfondi diferent, ognuno visualizzato su un MouseHover, non randomizzato e di nuovo al primo piano quando il 5 ° MouseHover è fatto. Come posso ottenere questo?

Ecco lo script jquery

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

ed il 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;
}

Modifica

Ho seguito il consiglio Scott M. e ottenuto questo codice:

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

E 'probabilmente manca qualcosa ...

, ma il problema è che non so come aggiungere gli altri div (logo1, logo2, logo3, e logo4) con le rispettive immagini e mantenere quindi invisibile fino a quando il suo proprio turno sul MouseHover, qual è il modo migliore? Display: nessuna

Answer 1

è possibile mantenere un contatore (ad esempio bgnum) e concatenare con un nome di file per ottenere ogni sfondo. Poi al passaggio del mouse si imposta il css usando

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

quindi incrementare il contatore, e MOD del 5 per cui non va mai oltre il numero di sfondo che avete.

bgnum = (bgnum + 1) % 5;