1

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

我这样做是使用：

$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);

它似乎不起作用，因为它没有覆盖background-color类 .highlight 本身的属性。而且我看不到动画removeClass方法甚至switchClassfrom .highlightto的方法''。

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

提前致谢。

4

4 回答 4

1

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

小提琴示例

transition:background-color 0.3s linear;

虽然这显然没有为动画提供尽可能多的浏览器支持。

于 2013-08-28T10:16:06.237 回答
0

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

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

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

});

在这里拉我一把！

于 2013-08-28T10:58:29.487 回答
0

.animate ()函数适用于“数字”属性，例如：高度、宽度、左侧等。但不适用于背景颜色。

你可以试试这个：

$(document).ready( function() {
$('tr.normal').on('click', function() {
   $(this)
   .hide()
   .delay(3000)
   .fadeIn('slow')
   .toggleClass('highlight');
   });             
 });
于 2013-08-28T11:29:58.637 回答
0

您可以使用 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
于 2013-08-28T11:32:43.130 回答