Question

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

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

我想要它fadeOut然后slideUp然后再次fadeOut on slideDown

你的时间和帮助非常适合：）

由于

更新 - 工作版

我设法让一切都运转良好，解决方案如下：

$('.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的原始启动！希望这可以帮助其他人解决同样的问题

Answer 1

通过以下方式管理以使其按需运行。希望它可以帮助其他人寻找类似的解决方案！

$('.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/

除了数值之外，每个属性都可以使用字符串 'show'，'hide'和'toggle'。

Answer 2

你使用这样的回调：

$('.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和slideDown但是有fadeOut和fadeIn？

2 个答案: