用動畫去除css類

我正在創建一個表，我想突出顯示特定的行。用動畫去除css類

我這樣做是使用：

$this.css('background-color', 'green'); 

$this.delay(3000).animate({ backgroundColor: $color }, 3000); 

$this = the row in question. 

$color = the previous row color.

但我想它與一個CSS類工作，所以像這樣

$this.addClass('highlight');

類.highlight只會有一個background-color。

問題是，我添加類後，我不能background-color。

如果我使用：

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

它似乎並沒有工作，因爲它沒有覆蓋類.highlight本身的background-color財產。而我沒有看到一種方法來動畫removeClass方法，甚至switchClass從.highlight到''。

有沒有什麼解決方案，我不想做這個。

在此先感謝。

來源

2013-08-28 Mario Patrao

這可以幫助：HTTP：/ /stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery –

您可以使用jQuery UI的.switchClass該動畫的所有風格的變化：.switchClass

一旦完成高亮顯示，使用回調來切換回來。

$('div').click(function() { 
    $(this).switchClass("normal", "color", 1000, "easeInOutQuad", function(){ 
     $(this).delay(3000).switchClass("color", "normal", 1000, "easeInOutQuad"); 
});

}）;

Fiddle me here!

來源

2013-08-28 10:58:29 mMoovs

謝謝，這工作正常。我仍然有一些問題，但我解決了它。有些東西不能正常工作，因爲我自己的表的CSS類，就像風格行奇數和偶數。再次感謝您！ –

改爲使用CSS轉換。更好的性能和更簡單。

Fiddle example

transition:background-color 0.3s linear;

雖然這並沒有提供動畫儘可能多的瀏覽器支持，效果顯着。

來源

2013-08-28 10:16:06 robooneus

感謝您的評論。這將是一個非常好的解決方案！不幸的是，我還需要考慮ie7的解決方案。對不起，忘了在我原來的帖子提及這個 –

的.animate()功能包含「數字」性質的工作：高度，寬度，左等。但不與背景顏色。

你可以試試這個：

$(document).ready(function() { 
$('tr.normal').on('click', function() { 
    $(this) 
    .hide() 
    .delay(3000) 
    .fadeIn('slow') 
    .toggleClass('highlight'); 
    });    
});

來源

2013-08-28 11:29:58 lollo

你可以使用jQuery的addClass與removeClass，考慮：

if($(document).scrollTop() > 250) 
{  
$('#div').addClass("show"); 
} 
else 
{ 
$('#div').removeClass("show"); 
} 
});

這是什麼東西做的是取代了原來的類，如「隱藏」與div class「show」，當用戶在頁面上滾動250px時，這段代碼會顯示一個橫幅。

請記住，如果您使用此代碼，使用CSS3轉換仍然更好（更平滑），除非您正在考慮瀏覽器不支持此功能的用戶，例如IE8-。

編輯：我剛剛意識到你這樣做的原因是因爲你正在考慮IE7用戶。完善。我從字面上解決了這個問題。

我使用的解決辦法是有一個過渡CSS3建立和探測器與if語句使用jQuery在不支持的過渡，見下圖：

var Detect = (function() { 
      var 
      //Add CSS properties to test for 
          props = "transition".split(","), 
      //Browser prefixes 
          CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","), 
          d = document.createElement("detect"), 
          test = [], 
          p, pty; 
      // test prefixed code 
      function TestPrefixes(prop) { 
          var 
              Uprop = prop.charAt(0).toUpperCase() + prop.substr(1), 
              All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' '); 
          for (var n = 0, np = All.length; n < np; n++) { 
              if (d.style[All[n]] === "") return true; 
          } 
    return false; 
      } 
      for (p in props) { 
          pty = props[p]; 
          test[pty] = TestPrefixes(pty); 
      } 
      return test; 

      }()); 


if (Detect.transition) { 
     $(function(){ 
$(window).scroll(function() { 
//your code here 
//remember to use an if else

來源

2013-08-28 11:32:43 user5623896726

用動畫去除css類

回答

相關問題