如何爲特定時間的元素設置背景顏色？

Question

這裏是我的代碼：

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

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

我還需要將此代碼添加到它：

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

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

我的意思是，我想這兩個滾動到一個元素，集它是橙色背景色，持續2秒。我怎樣才能做到這一點？

注意：如果橙色在2秒後順利淡化將是完美的。

Answer 1

你可以使用一些JS根據任何時間改變它，這是早晨，白天和黑夜。

$(document).ready(function(){ 
    var d = new Date(); 
    var n = d.getHours(); 
    if (n > 19 || n < 6) 
     // If time is after 7PM or before 6AM, apply night theme to ‘body’ 
     document.body.className = "night"; 
    else if (n > 16 && n < 19) 
     // If time is between 4PM – 7PM sunset theme to ‘body’ 
     document.body.className = "sunset"; 
    else 
     // Else use ‘day’ theme 
     document.body.className = "day"; 
}); 

Answer 2

您可以簡單地使用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; 
 
    } 
 
}

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

使用一個承諾，它傳遞函數即可動畫完成後運行。你也可以使用成功callback但承諾是更好，因爲它避免了雙重回調由於<html>和問題<body>（增加了對瀏覽器的兼容性）

$('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); 
});