使用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

您应该考虑使用"切换"功能...它允许您在两个不同的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");
});