用动画删除CSS类

Question

我正在创建一个表格，我想突出显示特定的一行。

我这样做是使用：

$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到'' 。

有什么解决方案我不打算这样做。

提前致谢。

Answer 1

请改用CSS过渡。 性能更好，更简单。

小提琴的例子

transition:background-color 0.3s linear;

尽管显然，这并没有为动画提供太多的浏览器支持。

Answer 2

您可以使用jQuery UI的.switchClass动画所有样式更改： .switchClass

突出显示完成后，使用回调将其切换回原来的状态。

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

}）;

在这里摆弄我！

Answer 3

.animate（）函数可使用“数字”属性，例如：高度，宽度，左侧等。但不适用于背景色。

您可以尝试以下方法：

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

Answer 4

您可以使用jQuery的addClass和removeClass，请考虑：

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

这样做是用div类“ show”替换原始类，例如“ hide”，当用户向下滚动页面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