cambiando lo sfondo di un elemento usando la proprietà CSS

Question

Ho un div con uno sfondo e vorrei cambiare la posizione dello sfondo con un clic.

Questo è il mio frammento di jQuery:

    $('#sprite').click(function() {
        $(this).css('backgroundPosition','-40px');
    });

Mentre funziona correttamente, vorrei tornare alla posizione originale con un 'secondo' clic, ripristinando tutto.

Mmm, è questo che si chiama un 'callback' giusto?

L'ho provato ma non ha funzionato:

    $('#sprite').click(function() {
        $(this).css('backgroundPosition','-40px');
    },
    function() {
        $(this).css('backgroundPosition','40px');
    }
    );

Grazie per qualsiasi informazione.

Answer 1

Dovresti prendere in considerazione l'utilizzo di " attiva " funzione per questo ... Ti permetterà di andare tra 2 diverse classi CSS ... Dai un'occhiata a questo tutorial qui .

$('#sprite').click(function() {
   $(this).toggle(
      function(){
    $(this).css('backgroundPosition', '40px');
      }, 
      function () {
    $(this).css('backgroundPosition', '-40px');
    });
});

Un'altra opzione piuttosto che impostare direttamente la proprietà CSS sarebbe quella di creare una classe CSS per lo sfondo e semplicemente attivare quella classe.

CSS

<style type="text/css">
    .spritebg { background-position: -40px; }
</style>

jQuery

$("#spite").click(function() {
   $(this).toggleClass("spritebg");
});

Answer 2

Fallo con le classi. È molto più semplice.

<style type="text/css">
#spite.moved { background-position: -40px; }
</style>

<script type="text/javascript">
$(function() {
  $("#spite").click(function() {
    $(this).toggleClass("moved");
  });
});
</script>

Answer 3

Stai capendo male il concetto di callback. Un callback in programmazione è una funzione che viene chiamata immediatamente dopo l'esecuzione del codice.

Nel tuo caso, stai dicendo quanto segue:

Al clic, imposta la mia posizione di sfondo su -40px. Una volta terminato, impostalo su 40px (annullando immediatamente ciò che la tua funzione ha appena fatto).

In questo caso, non è necessario utilizzare una funzione di richiamata. Devi impostare un interruttore in modo tale che quando l'utente fa clic sul tuo elemento, viene eseguita una funzione ... quindi la prossima volta che fa clic su tale elemento, viene eseguita la seconda funzione.