滑动切换效果 JQuery

Question

我尝试在 Jquery 中使用带有 slideToggle 效果的按钮来显示和隐藏 2 个 div 的内容，同时单击按钮......但它没有像我一样工作。这里是解释：

问题

• 单击“按钮 1”，隐藏的 div 会向上显示，底部菜单会下降，绿色文本会显示
• 您单击“按钮 2”，另一个带有蓝色文本的 div 会上升并显示
• 您单击“按钮 1”，显示的 div 会下降，您会看到“按钮 1”的文本

我想要实现的目标

• 单击“按钮 1”，隐藏的 div 会显示（绿色文本），底部菜单会下降。
• 您在“按钮 2”上单击一次，当前 div 消失（可见他向上滑动）和底部菜单 上升并立即下降并显示“按钮2”的文本（蓝色文本）
• 当您单击“按钮 1”一次（发生相同的操作）时，当前 div（带有蓝色文本 按钮2）消失，底部菜单立即上下并显示隐藏的div 按钮 1（绿色文本）
• 如果点击“按钮1”或“按钮2”（在第一次-作为起点） 按钮的相关 div 将显示（作为第 1 步）
• 并关闭所有“隐藏”的 div - 将在第二次单击同一个按钮。

这是在 JSfiddle 中预览的链接

<http://jsfiddle.net/GDdesign/P3Fuk/>

我希望我的解释清楚。 :-)

对于您的回答，我将非常感激，

GD设计

Answer 1

使用jquery回调函数，把你的js改成这样：

$(document).ready(function () {       
    $('ul.btns').on('click', 'a', function(event){ 
        event.preventDefault();  
        if ( $(this).hasClass('greenBtn') ) { 
            if ( $('#hide2').css('display') != 'none' ) { 
                $('#hide2').slideUp('2000', 'swing',function(){
                    $('#hide1').slideToggle('2000', 'swing'); 
                }); 
            }
            else
            {
                $('#hide1').slideToggle('2000', 'swing'); 
            }
        } else { 
            if ( $('#hide1').css('display') != 'none' ) { 
                $('#hide1').slideUp('2000', 'swing',function(){
                    $('#hide2').slideToggle('2000', 'swing'); 
                }); 
            }
            else
            {
                $('#hide2').slideToggle('2000', 'swing'); 
            }
        }
    });
});

jsFiddle 链接：DEMO