Gradually eliminate the background color in one smooth motion

Question

Gradually eliminate the background color in one smooth motion

When new messages appear, I want them to be subtly highlighted as users hover over them. The background color will slowly disappear on hover thanks to the CSS code provided below. However, this effect should only happen once, which is why I need to remove the additional class "newmessage" that triggers the background color change. But if I remove this class on hover, I lose the gradual disappearing effect...

.newmessage {
  background-color: rgba(213, 213, 213, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.newmessage:hover {
  background-color: rgba(213, 213, 213, 0);
}

javascript jquery css

Answer 1

Answer №1

To create a smooth transition for the style of an element when hovered, you can use JavaScript to add a specific class just once. This will trigger the transition effect on the element's style. Check out an updated version of your fiddle here

DEMO

var newMessages = document.querySelectorAll('.newmessage');

for (var i = 0, l = newMessages.length; i < l; i++) {
    // Add '.hovered' class on mouseover
    newMessages[i].addEventListener('mouseover', function() {
        this.classList.add('hovered');
    });
}

div {
    background-color: gray;
    height: 50px;
    width: 200px;
    margin-bottom: 5px;
}
.newmessage {
  background-color: rgba(220, 55, 55, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
/* Use additional class instead of .newmessage:hover */
.newmessage.hovered {
  background-color: rgba(220, 55, 55, 0);
}

<div></div>
<div></div>
<div class="newmessage"></div>

Answer 2

To create a smooth transition for the style of an element when hovered, you can use JavaScript to add a specific class just once. This will trigger the transition effect on the element's style. Check out an updated version of your fiddle here

DEMO

var newMessages = document.querySelectorAll('.newmessage');

for (var i = 0, l = newMessages.length; i < l; i++) {
    // Add '.hovered' class on mouseover
    newMessages[i].addEventListener('mouseover', function() {
        this.classList.add('hovered');
    });
}

div {
    background-color: gray;
    height: 50px;
    width: 200px;
    margin-bottom: 5px;
}
.newmessage {
  background-color: rgba(220, 55, 55, 1);
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
/* Use additional class instead of .newmessage:hover */
.newmessage.hovered {
  background-color: rgba(220, 55, 55, 0);
}

<div></div>
<div></div>
<div class="newmessage"></div>

Answer 3

Answer №2

If you're searching for a way to trigger a callback after a transition ends in order to remove a class, you can achieve this with the following methods:

Is there a callback on completion of a CSS3 animation?

Indeed, there is a callback event that can be utilized to handle this scenario. By adding an event listener, you can capture this event. Here is an example using jQuery:
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("The animation has finished") 
});
You can also achieve this with pure JavaScript:
element.addEventListener("webkitAnimationEnd", callfunction, false);
element.addEventListener("animationend", callfunction, false);
element.addEventListener("oanimationend", callfunction, false);
For a live demonstration, visit: http://jsfiddle.net/W3y7h/

Credits to @Duopixel

In your specific case, it may be necessary to use transitionend instead of animationend.

Answer 4

If you're searching for a way to trigger a callback after a transition ends in order to remove a class, you can achieve this with the following methods:

Is there a callback on completion of a CSS3 animation?

Indeed, there is a callback event that can be utilized to handle this scenario. By adding an event listener, you can capture this event. Here is an example using jQuery:
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("The animation has finished") 
});
You can also achieve this with pure JavaScript:
element.addEventListener("webkitAnimationEnd", callfunction, false);
element.addEventListener("animationend", callfunction, false);
element.addEventListener("oanimationend", callfunction, false);
For a live demonstration, visit: http://jsfiddle.net/W3y7h/

Credits to @Duopixel

In your specific case, it may be necessary to use transitionend instead of animationend.

Gradually eliminate the background color in one smooth motion

Answer №1

Answer №2

Similar questions

Tips on how to showcase up to 200 characters from a string

What is the reason for HereMap factoring in stopOver time when calculating travel time for the destination waypoint?

Deactivate the image button when no image has been chosen from the input field

Sending a JavaScript function as a value in a JSON object

The JSON array data is coming back as undefined

Retrieve from MongoDB the items where the age is greater than 10 using the find function in the learngyoumongo

How can one determine the most accurate box-shadow values?

Calling this.$refs.upload.submit() is not providing the expected response from Element-UI

Cross domain tracking pixel implemented using ASP.NET, jQuery, and AJAX technology

IE9 is not recognizing CSS styles

What is the best way to substitute spaces with underscores in JSON data and incorporate hyperlinks for each row in datatables?

What steps are needed to convert the format to an array in JavaScript?

Instructions for removing and recreating an input field along with its parent elements when the value of a Select tag is changed

Navigating through external JSON data in a Node.js and Express application, and rendering the data using Jade

What is the process of utilizing an npm package as a plain JavaScript library through require and module export?

Having trouble accessing the value of null and adding it to an array

Styling the button in jQuery to switch between disabled and enabled

Encountering a React.js issue when attempting to update data

How to remove a specific type from a generic type in Typescript without using Exclude<>?

Checkboxes with dynamic functionalities are not being submitted in the form