jQuery slideUp and slideDown but with fadeOut and fadeIn?

Question

i have done an Accordion style jQuery function which works lovely, but would like to add to it fadeOut and FadeIn here is the part of the code:

$('.product-accordion-trigger').click(function(){
        if( $(this).next().is(':hidden') ) {
            $('.product-accordion-trigger').removeClass('active').next().slideUp();
            $(this).toggleClass('active').next().slideDown();
        }
        return false;
    });

Im wanting to it fadeOut then slideUp and then again fadeOut on slideDown

Your time and help is much appriciated :)

Thanks

UPDATED - Working Version

I managed to get it all working great and the solution was as follows:

$('.product-accordion-trigger').click(function(){
        if( $(this).next().is(':hidden') ) {
            $('.product-accordion-trigger').removeClass('active').next().animate({ height: 'hide', opacity: 0 });
            $(this).toggleClass('active').next().animate({ height: 'show', opacity: 1 });
        }
        return false;
    });

Thanks to lolwut for the original kick start! hope this helps anyone else with the same problem

Please post your solution below as a complete answer and then "accept" your own answer. — Sparky, Nov 05 '11 at 21:20
Ooooops! I see below that, even though he posted the answer and accepted it, his reputation (1) has not increased. — zequinha-bsb, Nov 11 '11 at 23:48
@zequinha-bsb, That is the accepted procedure when you solve your own problems. This is the best way to help others. — Sparky, Mar 06 '12 at 16:37

score 2 · Accepted Answer · edited Dec 10 '18 at 18:45

Managed to get it working as needed with the following. Hope it helps anyone else looking for a similar solution!

$('.product-accordion-trigger').click(function(){
    if( $(this).next().is(':hidden') ) {
        $('.product-accordion-trigger')
            .removeClass('active').next()
            .animate({ height: 'hide', opacity: 0 });

        $(this).toggleClass('active').next()
            .animate({ height: 'show', opacity: 1 });
    }
    return false;
});

http://api.jquery.com/animate/

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'.

score 1 · Answer 2 · answered Nov 05 '11 at 19:43

You use callbacks like this:

$('.product-accordion-trigger').click(function(){
    if( $(this).next().is(':hidden') ) {
        $('.product-accordion-trigger').removeClass('active').next().animate({ width: 'hide', opacity: 0 }, function()
        {
            $(this).toggleClass('active').next().animate({ width: 'show', opacity: 1 });
        });
    }
    return false;
});

jQuery slideUp and slideDown but with fadeOut and fadeIn?

2 Answers2

Linked