изменение фона элемента с помощью свойства CSS - PullRequest
Новая
       20

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

2 голосов
/ 29 июля 2009

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

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

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

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

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

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

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

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

Ответы [ 3 ]

9 голосов
/ 29 июля 2009

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

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

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

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

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

3 голосов
/ 29 июля 2009

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

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

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