jQuery slideUp和slideDown但具有fadeOut和fadeIn吗? [英] jQuery slideUp and slideDown but with fadeOut and fadeIn?

问题描述

我已经完成了一个手风琴风格的jQuery函数，该函数很可爱，但是想要添加它的淡出和FadeIn，这是代码的一部分:

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;
    });

我要先淡出然后滑动，然后再次在SlideDown上淡出

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

非常感谢您的时间和帮助:)

Your time and help is much appriciated :)

谢谢

已更新-工作版本

我设法使其运转良好，解决方案如下:

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;
    });

感谢lolwut的最初踢球！希望这可以帮助其他遇到相同问题的人

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

推荐答案

可通过以下方法使其按需运行.希望它可以帮助其他寻求类似解决方案的人！

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'.

这篇关于jQuery slideUp和slideDown但具有fadeOut和fadeIn吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！