What is the best way to apply a background color to an element temporarily?

Question

What is the best way to apply a background color to an element temporarily?

Check out the following code snippet:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

... (additional script lines)

In addition to that, I need to incorporate this code as well:

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

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

I am trying to achieve both scrolling to an element and setting its background color to orange for a duration of 2 seconds. How can I accomplish this?

Please note: Ideally, I would like the orange color to smoothly fade away after 2 seconds.

javascript jquery html css

Answer 1

Answer №1

You have the ability to utilize JavaScript in order to modify it based on different times of day, such as morning, day, and night.

$(document).ready(function(){
    var currentDate = new Date();
    var currentTime = currentDate.getHours();
    if (currentTime > 19 || currentTime < 6)
      // When it is past 7PM or before 6AM, switch to the night theme for the ‘body’ element
      document.body.className = "night";
    else if (currentTime > 16 && currentTime < 19)
      // If the time falls between 4PM and 7PM, apply the sunset theme to the ‘body’ element
      document.body.className = "sunset";
    else
      // Otherwise, use the default ‘day’ theme
      document.body.className = "day";
});

Answer 2

You have the ability to utilize JavaScript in order to modify it based on different times of day, such as morning, day, and night.

$(document).ready(function(){
    var currentDate = new Date();
    var currentTime = currentDate.getHours();
    if (currentTime > 19 || currentTime < 6)
      // When it is past 7PM or before 6AM, switch to the night theme for the ‘body’ element
      document.body.className = "night";
    else if (currentTime > 16 && currentTime < 19)
      // If the time falls between 4PM and 7PM, apply the sunset theme to the ‘body’ element
      document.body.className = "sunset";
    else
      // Otherwise, use the default ‘day’ theme
      document.body.className = "day";
});

Answer 3

Answer №2

this code snippet will alter the background-color once the user scrolls past a certain point on the page.

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

Answer 4

this code snippet will alter the background-color once the user scrolls past a certain point on the page.

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

Answer 5

Answer №3

To change the background-color, you can utilize css animation.

$('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...
  <div class="clsname">scroll to top</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>

Answer 6

To change the background-color, you can utilize css animation.

$('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...
  <div class="clsname">scroll to top</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>

Answer 7

Answer №4

Utilize a promise by passing it a function that will execute upon the completion of animation. Another option is to use the success callback, but using a promise is preferable because it prevents the issue of double callbacks caused by <html> and <body> (included 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);
});

Answer 8

Utilize a promise by passing it a function that will execute upon the completion of animation. Another option is to use the success callback, but using a promise is preferable because it prevents the issue of double callbacks caused by <html> and <body> (included 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);
});

What is the best way to apply a background color to an element temporarily?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a dynamic HTML table by dynamically populating a column

Learn the steps to access a Collection in Meteor.js and then send it to a function once the DOM has finished

Removing a post in Meteor-React using a submission modal is not possible as the post is not defined

Having difficulties sending data from axios to my node server, resulting in an empty object being returned

What is the best way to maintain a fixed header for a content div?

Tips for increasing the width of a button within an HTML table heading

The function get_the_category() is not compatible when used within the <figcaption> element

Unable to download essential dependencies using NPM

Bootstrap's landing page problem

Disable postback onkeypress event in the page

How to successfully send additional data along with a file upload in an AJAX request using CodeIgniter

I would like to check if a given username and password exist in my JSON data

Customize the appearance of a <label> tag when it is inside an <input> tag that is marked as invalid

What is the best way to enable a link upon clicking while simultaneously disabling the others using JavaScript?

Use JavaScript to submit a form in Django containing the <a></a> tag

Issue with formik onchange event not filling data in Material UI TEXTFIELD component

Unfortunately, Node Sass does not have compatibility with your current environment, which is Windows 64-bit with an unsupported runtime

An error has occurred: String cannot have property 'innerText' created

Retrieve information from an HTML form, make updates to the database, and exhibit the data in a table on the current page with the help

The component "SafeAreaViewRN" could not be located within the UIManager