How to set a background color to an element for specific time?

Question

Here is my code:

 $('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> 

I also need to add this code to it:

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

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

I mean, I want to both scroll to an element and set it a orange background color for 2 sec. How can I do that?

Note: It would be perfect if the orange color fade smoothly after 2 sec.

Answer 1

You can use some JS to change it based on whatever time, this being morning, day and night.

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

You can simply use css animation to switch 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

this will change the background-color after body scrolled below.

  $('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

Use a promise ,pass it a function to be run upon animation completion .You could also use success callback but promise is better as it avoids the problem of double callbacks due to <html> and <body> (added for browser compatibility)

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