slideToggle效果JQuery

Question

我尝试在Jquery中使用slideToggle效果来显示和隐藏2个div的内容，同时点击按钮......但它不能正常工作。这里的解释是：

问题

• 点击＆＃34;按钮1＆＃34;隐藏的div显示和底部菜单关闭，绿色文本显示
• 点击＆＃34;按钮2＆＃34;蓝色文字的另一个div上升和显示
• 您点击了＆＃34;按钮1＆＃34; div显示下降，你会看到＆＃34;按钮1＆＃34;
的文字

我想要实现的目标

• 点击＆＃34;按钮1＆＃34;隐藏的div显示（绿色文本）和底部菜单关闭。
• 点击ONCE on＆＃34;按钮2＆＃34;当前div消失（visualy他slideUp）和底部菜单 上升并立即下降并显示＆＃34;按钮2＆＃34; （蓝色文字）
• 当您点击＆＃34;按钮1＆＃34; ONCE（发生相同的动作）当前div（带有蓝色文本） 按钮2）消失，底部菜单立即上下移动并显示隐藏的div 按钮1（绿色文字）
• 如果点击＆＃34;按钮1＆＃34;或＆＃34;按钮2＆＃34; （在第一次 - 作为起点） 按钮的相关div将显示（如步骤1）
• 并关闭所有＆＃34;隐藏＆＃34; div - 将在第二次点击同一个按钮。

这是JSfiddle预览的链接

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

我希望我能清楚自己的解释。 ： - ）

对于你的答案，我将非常感激，

GDdesign

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