点击 jquery 更改 css 样式

Question

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-content').slideToggle('slow', function () {
    });
});

So how can i toggle between?

.close{background-position:top}

and

.close{background-position:bottom;}

Answer 1

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');

Answer 2

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

Answer 3

    $('.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');
    }
});

Answer 4

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'});
        }
    });
});