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