How to add a fade-in effect in jQuery

Question

How to add a fade-in effect when clicking on a div. I have a profile menu dropdown and the click event was made with jQuery. Also, how to make this to close if I click anywhere outside?

This is the code

jQuery(document).ready(function(){
    jQuery(".profile_link_header").click(function(){
        jQuery(".dropdown").toggleClass("active");
    })
});

CSS

.dropdown.active{
    display: block;
}

I managed to make it fade-in and fade-out but now I need to make it to auto toggle-off when clicking anywhere outside. — henrymendeez, Feb 14 '21 at 09:50

score 0 · Accepted Answer · answered Feb 14 '21 at 09:17

0

Without your html code, you just add fade-in on your selector:

$(document).ready(function(){
    $(".profile_link_header").click(function(){
        $(".dropdown").toggleClass("active").fadeIn("slow");;
    })
});

I suppose here is on your .dropdown class, else you apply the faeIn on your selector desired

answered Feb 14 '21 at 09:17

Frenchy

16,386
3
16
39

Thanks for your answer, I managed to make it fade-in but when clicking to toggle out it doesn't work anymore. – henrymendeez Feb 14 '21 at 09:33
I managed to make it as I wanted, fadeIn and toggle off on click outside following this code from another question. http://jsfiddle.net/evGd6/2/ – henrymendeez Feb 14 '21 at 18:51

How to add a fade-in effect in jQuery

1 Answers1