CODEWITHSUNDEEP
jquerycsstogglebackground-position
Peanuts
Peanuts

Reputation: 2681

changing an element's background using the CSS property

I have a div with a background, and I'd like to change the background's position on click.

This is my jQuery snippet :

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

While this is working ok, I'd like to return to the original position with a 'second' click, resetting all.

Mmm, is this what's called a 'callback' right?

I tried so with that but it didn't work :

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

Upvotes: 2

Views: 1393

Answers (3)

cletus
cletus

Reputation: 625347

Do it with classes. It's much much easier.

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

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

Upvotes: 3

RSolberg
RSolberg

Reputation: 26972

You should consider using a "toggle" function for this... It'll allow you to go between 2 different CSS classes... Check out this tutorial here.

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

Another option rather than setting the CSS property directly would be to create a CSS class for your background and simply toggle that class.

CSS

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

jQuery

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

Upvotes: 9

Justin Niessner
Justin Niessner

Reputation: 245479

You're mis-understanding the concept of a callback. A callback in programming is a function that gets called immediately after the executing code.

In your case, you're saying the following:

On click, set my background position to -40px. Once you're done with that, set it to 40px (immediately undoing what your function just did).

In this case, you don't need to use a callback function. You need to set up a toggle so that when the user clicks on your element, one function is run...then the next time they click on that element, the second function is run.

Upvotes: 3

Related Questions