change css style on click with jquery

I have the following click event. I would also like to toggle the background-position: between top and bottom on click.

$('.close').click(function () {
    $('.banner-inner开发者_JAVA技巧-content').slideToggle('slow', function () {
    });
});

So how can i toggle between?

.close{background-position:top}

and

.close{background-position:bottom;}

---

You can pass a function to .css():

$(this).css('background-position', function(i, val) {
    return val === 'top' ? 'bottom' : 'top';
});

Or you define a new class:

.close.bottom {
    background-position: bottom;
}

and use .toggleClass():

$(this).toggleClass('bottom');

---

you could use two differents css class (one for top and the other for bottom) and when onClick event is shooted change it.

---

    $('.close').click(function () {
        if($('.banner-inner-content').hasClass('top')){
            $('.banner-inner-content').removeClass('top');
            $('.banner-inner-content').addClass('bottom');
    }else{
            $('.banner-inner-content').addClass('top');
            $('.banner-inner-content').removeClass('bottom');
    }
});

---

try using isvisible to check if its being displayed or not and add the respective position:

$('.close').click(function () {
    $('.banner-inner-content').slideToggle('slow', function () {
        if( $(this).is(':visible') ) {
            $(this).css({backgroundPosition: 'top'});
        }
        else {
            $(this).css({backgroundPosition: 'bottom'});
        }
    });
});