Question

我发现很多使用各种方法的例子，例如转换和动画来获得这样的工作，但似乎没有任何东西适用于我的特定用例。我希望能够在加载页面时暂时突出显示/更改元素的背景颜色。我已经明确地将这个工作用于在行上方使用eas-in-out转换悬停在元素上并且它工作得很好，但是我似乎无法使这个工作用于页面的加载。 / p>

具体来说，我需要一个我选择的特定行（我已经使用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");

Answer 1

.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;}
}

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

Answer 2

最简单的方法是使用animation.动画将在元素和CSS加载后立即播放。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

与transitions不同，动画不需要更改状态以触发其更改。

Answer 3

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

但是，如果您还为.effect加载了jquery-ui，则只能使用它，您可以根据需要更改缓动。

$.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类。

Answer 4

如果我做对了，你可以使用de .load()或.ready()事件将一些css应用到元素，在这种情况下是背景颜色。您还可以通过joonas89

中提到的jQuery添加一些动画

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: