Search code examples
jqueryhtmlcssdelay

Different jquery effects on specific elements from one div

I have .menu div and inside him .menu-content div with links. I want to slideDown .menu and after this animation is finished i want to slideUp .menu-content div. Is this possible? Or can i somehow use wow.js animation that will trigger after sliding down is finished.

This is what i have so far and this just slide down whole div

$('.nav-button').click(function() {
    $('.menu').slideToggle(400);
    return false;
});
Solution

  • .slideToggle() can take two parameters: The first one is the animation duration, the second one a callback function that is called when the animation is complete. Just use it:

    $('.nav-button').click(function() {
    $('.menu').slideToggle(
        400,
        function() {
            $('.menu').slideToggle(400);
        }
    );
    return false;
});

    See the jQuery API documentation for more details.