用动画去除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类

回答

相关问题