使用jquery更改css样式

Question

我有以下单击事件。我还想切换背景位置：点击顶部和底部之间。

$('.close').click(function() { 
    $('.banner-inner-content').slideToggle('slow', function() { 
    }); 
}); 

那么我该如何切换？

.close{background-position:top} 

和

.close{background-position:bottom;} 

Answer 1

你可以通过一个函数来.css()：

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

或者你定义一个新类：

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

，并使用.toggleClass()：

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

Answer 2

，你就可以使用两个型动物的CSS类（一个用于顶部，另一个用于底部），当onClick事件被shooted改变它。

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

尝试使用可见性，以检查其是否正在显示与否，并添加相应的位置：

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