Unable to get CSS transition to function properly after adding a class using jQuery

Question

Unable to get CSS transition to function properly after adding a class using jQuery

I am trying to create a hover effect that shows an image when the mouse is over a specific div, but for some reason, the transition is not working as expected. I understand that using visibility: hidden cannot be animated.

Here is the code 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="">

javascript html jquery css

Answer 1

Answer №1

There seems to be some confusion with the use of animations in this code snippet. Typically, animations require an @keyframes sequence to specify the animation. However, a CSS transition might suffice in this case without needing a full CSS animation.

To achieve a transition effect, transition: all 2s has been included for future transitions. If only transitioning opacity is desired, you can use 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="">

Answer 2

There seems to be some confusion with the use of animations in this code snippet. Typically, animations require an @keyframes sequence to specify the animation. However, a CSS transition might suffice in this case without needing a full CSS animation.

To achieve a transition effect, transition: all 2s has been included for future transitions. If only transitioning opacity is desired, you can use 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="">

Answer 3

Answer №2

For those interested in utilizing animations, please refer to the documentation where you will find information on using @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="">

Answer 4

For those interested in utilizing animations, please refer to the documentation where you will find information on using @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="">

Answer 5

Answer №3

Looking for a CSS solution utilizing the :hover pseudo-class without the need for 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="">

Answer 6

Looking for a CSS solution utilizing the :hover pseudo-class without the need for 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="">

Unable to get CSS transition to function properly after adding a class using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Guide on launching a mobile application upon clicking a button in a mobile browser (with the assistance of JavaScript/React) [Utilizing Deep Linking]

The objects-to-csv module encountered an error: fs.existsSync is not a valid function for this

Retrieve information from MySQL database with jQuery upon button click

Identify the month in which there is no data available in the database

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

Fixed css footer with full height content container

What is causing the content to appear cluttered inside the jQuery Dialog Box?

Having difficulty communicating with the smart contract using JavaScript in order to retrieve the user's address and the balance of the smart contract

What is the best way to incorporate a @types module into a TypeScript file that is not already a module?

What is the best way to assign three different dates in my protractor test?

Tips for adding images using v-for in Vue 3

Using Backbone.js to Retrieve Data from the Server and Bind it to a Model

Tips for utilizing the async.js library in combination with the await keyword?

React Modals: Only the modal component triggered by the first click will open, with no other modals opening

Executing Javascript on Selenium RC with PHP is a crucial skill to have in your toolkit

Divide the identical elements and distinct elements from a provided array into two separate arrays storing unique elements and recurring elements

Reveal or conceal interactive material using data attributes

issues stemming from the css of leaflets

Is there a way to ensure consistent border thickness in a material-ui table layout?