Alterar o fundo de um elemento usando a propriedade CSS

Question

Eu tenho uma div com plano de fundo e gostaria de alterar a posição do fundo no clique.

Este é o meu trecho jQuery:

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

Embora isso esteja funcionando bem, gostaria de retornar à posição original com um clique 'segundo', redefinindo tudo.

Mmm, isso é o que é chamado de 'retorno de chamada', certo?

Eu tentei com isso, mas não funcionou:

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

Obrigado por qualquer informação.

Answer 1

Você deve considerar o uso de uma função "alternar" para isso ... Permitirá que você vá entre 2 aulas CSS diferentes ... Confira este tutorial aqui.

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

Outra opção, em vez de definir diretamente a propriedade CSS, seria criar uma classe CSS para o seu plano de fundo e simplesmente alternar essa classe.

CSS

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

jQuery

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

Answer 2

Faça isso com aulas. É muito mais 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

Você está entendendo mal o conceito de retorno de chamada. Um retorno de chamada na programação é uma função que é chamada imediatamente após o código de execução.

No seu caso, você está dizendo o seguinte:

Em clique, defina minha posição de segundo plano como -40px. Depois de terminar, defina -o para 40px (desfazendo imediatamente o que sua função acabou de fazer).

Nesse caso, você não precisa usar uma função de retorno de chamada. Você precisa configurar uma alternância para que, quando o usuário clique no seu elemento, uma função seja executada ... então, na próxima vez que clicarem nesse elemento, a segunda função é executada.