CSS在加载时临时更改行的背景颜色。

我发现很多使用各种方法（例如过渡和动画）来获得像这样的工作的例子，但似乎没有任何工具可以用于我的特定用例。我希望能够在加载页面时暂时突出显示/更改元素的背景颜色。我已经得到了这个特别的工作，当使用eas-in-out转换悬停在该元素的悬停上，并且它工作的很好，但我似乎无法得到这个工作负载的页面。CSS在加载时临时更改行的背景颜色。

具体而言，我需要一个特定的行（我已经使用JS）在页面加载时闪烁一次，就是这样。我如何将这个CSS添加到我的行？

下面是我用盘旋代码：

.FoodConsumptionTable tr { 
    background-color: white; 
    transition: background-color .75s ease-in-out; 
    -moz-transition: background-color .75s ease-in-out; 
    -webkit-transition: background-color .75s ease-in-out; 
} 

.FoodConsumptionTable tr:hover { 
    background-color: #d2f9f3; 
}

这里是如何，我选择了正确的行，以尝试和突出显示：

var newRowId = $('#<%=hdnNewRowID.ClientID %>').val();   
$("input:hidden[value='" + newRowId + "']").eq(1).parent().parent().addClass("NewGridRow");

来源

2016-06-28 LaRae White

怎么样具有有你心目中的背景颜色的类，然后添加该类页面加载，设置超时不管多久，然后删除那个班级？ –

最简单的方法是使用animation.加载元素和CSS后，动画就会播放。

html, body { 
 
    background-color: #333; 
 
} 
 

 
@keyframes FadeIn { 
 
    from { 
 
    background-color: #d2f9f3; 
 
    } 
 
    
 
    to { 
 
    background-color: white; 
 
    } 
 
} 
 

 
.FoodConsumptionTable tr { 
 
    background-color: white; 
 
    animation: FadeIn 0.75s ease-in-out forwards; 
 
}

<table class="FoodConsumptionTable"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Apple</td> 
 
     <td>Orange</td> 
 
     <td>Banana</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

不像transitions，动画不需要状态的变化来火了自己的变化。

来源

2016-06-28 14:50:08

.someSelector{ 
    background-color: blue; 
    animation-name: animationName; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: 1;  
    animation-play-state: running; 
} 

@keyframes animationName { 
    0% {background-color:blue;} 
    100% {background-color:red;} 
}

也许你可以使用关键帧动画？

来源

2016-06-28 14:42:54 Joonas89

谢谢！过去几个小时我一直在关注这些关键帧动画，并且无法正确配置它。 –

没问题，祝你好运！ :) – Joonas89

编辑... appologies –

由于您已经有了对该行的引用，我最喜欢的方法是调用jquery扩展来为您提供脉冲。

但只有在您使用jquery-ui加载.effect时才能使用，您可以根据需要更改易用性。

$.fn.pulseHighlight = 
    function (duration) { 
     return this.each(function() { 
      $(this).effect("highlight", { color: '#00AA00' }, duration || 1000); 
     }); 
    }; 


var newRowId = $('#<%=hdnNewRowID.ClientID %>').val();   
$("input:hidden[value='" + newRowId + "']").eq(1).parent().parent().pulseHighlight();

唯一需要注意的是，您必须为颜色使用值，而不仅仅是一个css类。

来源

2016-06-28 14:53:40

如果我说得对，您可以使用de或.ready()事件将一些CSS应用于元素，在这种情况下为背景色。您也可以通过jQuery的添加一些动画由Joonas89提到

$(document).ready(function(){ 
 
    $('#select-me').css('background-color','blue'); 
 
});

#select-me{ 
 
    width: 80px; 
 
    height:40px; 
 
    background-color: red; 
 
}

<div id="select-me"></div>

来源

2016-06-28 14:58:06

CSS在加载时临时更改行的背景颜色。

回答

相关问题