Изменение фона элемента с помощью свойства CSS

Question

У меня есть div с фоном, и я хотел бы изменить положение фона при нажатии.

Это мой фрагмент jQuery:

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

Пока все работает нормально, я бы хотел вернуться в исходное положение "вторым" щелчком, сбросив все настройки.

Ммм, это то, что называется "обратным вызовом", верно?

Я пытался так с этим, но это не сработало:

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

Спасибо за любую информацию.

Answer 1

Вы должны рассмотреть возможность использования функции "toggle" для этого... Это позволит вам переключаться между 2 различными классами CSS... Ознакомьтесь с этим руководством здесь.

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

Другой вариант, вместо прямой установки свойства CSS, - создать класс CSS для фона и просто переключить этот класс.

CSS

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

JQuery

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

Answer 2

Вы неправильно понимаете концепцию обратного вызова. Обратный вызов в программировании - это функция, которая вызывается сразу после выполнения кода.

В вашем случае вы говорите следующее:

При нажатии установите мою фоновую позицию на -40px. Как только вы закончите с этим, установите его на 40px (немедленно отменяя то, что только что сделала ваша функция).

В этом случае вам не нужно использовать функцию обратного вызова. Вам нужно настроить переключатель так, чтобы, когда пользователь нажимает на ваш элемент, запускалась одна функция... затем при следующем нажатии на этот элемент запускалась вторая функция.

Answer 3

Делай это с классами. Это намного проще.

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

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