CSS transition not working when adding class via jquery

Question

I am adding a class to show an image when the mouse is over a div, but the transition isnt working at all. I am using opacity, I know that the visibily: hidden is not animable.

The code is in the snippet:

$(document).ready(function() {
    
    $("#trigger").on("mouseenter", function () {
        $("#imgPuffo").addClass("visible");

        $("#trigger").on("mouseout", function () {
            $("#imgPuffo").removeClass("visible");
        });
        
    });

});

#trigger {
        height: 100px;
        width: 100px;
        background: red;
    }
    img {
        opacity: 0;
        animation: opacity 2s;
    }
    .visible {
        visibility: visible;
        opacity: 1;
        animation: opacity 2s;
    }
    .imgPuffo {
        height: 200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
    <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

visibility IS animatable...

Paulie_D
– Paulie_D

2021-01-23 23:42:37 +00:00
Commented Jan 23, 2021 at 23:42 — Paulie_D
– Paulie_D, Commented Jan 23, 2021 at 23:42

A Haworth · Accepted Answer · 2021-01-23 23:45:41Z

There's a bit of confusion as animation is being used, but animation will look for an @keyframes sequence to tell it what animation to run. In fact it looks as though we don't need a full CSS animation in this case, just a CSS transition.

I've added transition: all 2s in case you want to transition anything else in future, like the scale, but if you just want to stick with transitioning opacity you could do transition: opacity 2s instead.

$(document).ready(function() {
    
    $("#trigger").on("mouseenter", function () {
        $("#imgPuffo").addClass("visible");

        $("#trigger").on("mouseout", function () {
            $("#imgPuffo").removeClass("visible");
        });
        
    });

});

#trigger {
        height: 100px;
        width: 100px;
        background: red;
    }
    img {
        opacity: 0;
        /* animation: opacity 2s; */
        transition: all 2s;
    }
    .visible {
        visibility: visible;
        opacity: 1;
        /* animation: opacity 2s; */
    }
    .imgPuffo {
        height: 200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
    <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

DCR · Accepted Answer · 2021-01-23 23:42:09Z

if you want to use animations check the docs. You need to use @keyframes

$(document).ready(function() {
    
    $("#trigger").on("mouseenter", function () {
        $("#imgPuffo").addClass("visible");

        $("#trigger").on("mouseout", function () {
            $("#imgPuffo").removeClass("visible");
        });
        
    });

});

#trigger {
        height: 100px;
        width: 100px;
        background: red;
    }
    img {
        opacity: 0;
        animation: opacity 2s;
    }
    .visible {
        visibility: visible;
        opacity: 1;  
        
        transition: opacity 2s ease-in-out;
        
    }
    .imgPuffo {
        height: 200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="trigger"></div>
    <img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

s.kuznetsov · Accepted Answer · 2021-01-24 00:36:41Z

1

How about a solution for css using a :hover, without jquery?

#trigger {
  height: 100px;
  width: 100px;
  background: red;
}
    
#trigger:hover + .imgPuffo {
  opacity: 1;
}

.imgPuffo {
  opacity: 0;
  height: 200px;
  transition: opacity 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="trigger"></div>
<img id="imgPuffo" class="imgPuffo" src="https://www.pinclipart.com/picdir/big/449-4499911_how-to-draw-papa-smurf-from-the-smurfs.png" alt="">

answered Jan 24, 2021 at 0:36

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

CSS transition not working when adding class via jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related