jQuery add/remove css on mouseover with delay

1

Hello,
how can I add a delay on this effect using jQuery?
A fade-in/fade-out of the image’s opacity when mouse over it.
I’m new to coding so feel free to rewrite the code if you think there is a better way to do it.

$(document).ready(function() {

$("img").on({
  mouseenter: function() {
    $(this).css("opacity", "0.5")
  },
  mouseleave: function() {
    $(this).css("opacity", "")
  },
});

});

Jsfiddle link https://jsfiddle.net/w5d3jdjb/

2

No jQuery at all:
https://jsfiddle.net/5rk77jfn/2/

1 Like
3

I didn’t remember this css property, thanks a lot!

4

what about
transition: all 2s 1s
?