изменение фона элемента с помощью свойства 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

Вам следует подумать об использовании " переключателя " функция для этого ... Это позволит вам переключаться между 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

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

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

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

Answer 3

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

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

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

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