cambiar el fondo de un elemento usando la propiedad CSS

Question

Tengo un div con un fondo, y me gustaría cambiar la posición del fondo al hacer clic.

Este es mi fragmento de jQuery:

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

Mientras esto funciona bien, me gustaría volver a la posición original con un 'segundo' clic, restableciendo todo.

Mmm, ¿es esto lo que se llama una "devolución de llamada" verdad?

Lo intenté con eso pero no funcionó:

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

Gracias por cualquier información.

Answer 1

Debería considerar usar un " alternar " función para esto ... Te permitirá ir entre 2 clases CSS diferentes ... Mira este tutorial aquí .

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

Otra opción en lugar de establecer la propiedad CSS directamente sería crear una clase CSS para su fondo y simplemente alternar esa clase.

CSS

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

jQuery

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

Answer 2

Hazlo con clases. Es mucho más fácil.

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

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

Answer 3

Usted no comprende bien el concepto de devolución de llamada. Una devolución de llamada en la programación es una función que se llama inmediatamente después del código de ejecución.

En su caso, está diciendo lo siguiente:

Al hacer clic, establezca mi posición de fondo en -40px. Una vez que haya terminado con eso, configúrelo en 40px (deshaciendo inmediatamente lo que acaba de hacer su función).

En este caso, no necesita usar una función de devolución de llamada. Debe configurar una palanca para que cuando el usuario haga clic en su elemento, se ejecute una función ... luego, la próxima vez que haga clic en ese elemento, se ejecutará la segunda función.