Question

这是我的代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="clsname">scroll to here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

＆＃13;

var $el = $(".clsname"),
    x = 2000,
    originalColor = $el.css("background");

$el.css("background", "orange");
setTimeout(function(){
  $el.css("background", originalColor);
}, x);

＆＃13;

我还需要将此代码添加到其中：

//Your Master Model Properties 
    public partial class YourMasterModel
        {
             public List<YourModel> YourMasterModelList{ get; set;  }
             public YourModel YourModel{ get; set; }
         }    

   //Your Model Properties 
    public partial class YourModel
        {
            public int Id { get; set; }
            public string Param1 { get; set; }
            public string Param2 { get; set; }
            public int[] SelectedListOptions { get; set; }
        }

我的意思是，我想要滚动到一个元素并将其设置为橙色背景颜色，持续2秒。我怎么能这样做？

注意：如果橙色在2秒后平滑淡化，那将是完美的。

Answer 1

你可以使用一些JS根据时间来改变它，这是早晨，白天和黑夜。

{{1}}

Answer 2

您只需使用lengthComputable切换css animation即可。

background-color

$('html,body').animate({
  scrollTop: -20 + $('.clsname').offset().top
});

.clsname {
  background: none;
}
.clsname {
  -webkit-animation-name: example;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 2s;
  /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 2s;
}
/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
  from {
    background: orange;
  }
  to {
    background:none;
  }
}

Answer 3

这将更改身体滚动到下方后的background-color。

 $('html,body').animate({scrollTop: -20 + $('.clsname').offset().top}, 2000);

setTimeout(function(){
   $('.clsname').css({backgroundColor: 'orange'});
}, 2000);
setTimeout(function(){
   $('.clsname').css({backgroundColor: 'transparent'});
}, 3000);

.clsname{
  transition: all 2s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="clsname">scroll to here</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Answer 4

使用promise，传递一个函数以在动画完成时运行。你也可以使用成功callback但是承诺更好，因为它避免了<html>和{{<body>引起的双回调问题1}}（为浏览器兼容性而添加）

$('html,body').animate({scrollTop: -20 + $('.clsname').offset().top  }).promise().done(function(){
    var $el = $(".clsname"),
    x = 2000,
    originalColor = $el.css("background");
    $el.css("background", "orange");

    setTimeout(function(){
        $el.css("background", originalColor);
    }, x);
});

如何在特定时间内为元素设置背景颜色？

4 个答案: