JQuery 使用不同的按钮切换 div 并通过单击活动来显示/隐藏答案

【问题标题】：JQuery toggle div´s with different Buttons and Show/Hide by click active oneJQuery 使用不同的按钮切换 div 并通过单击活动来显示/隐藏
【发布时间】：2015-02-04 20:32:24
【问题描述】：

我有三个按钮（加载时不活动）。当我单击一个按钮时，div 显示。当我点击第二个按钮第一次隐藏，第二次显示...

HTML

                    <ul>
                        <li><a class="button" data-rel="#a" href="#">A</a></li>
                        <li><a class="button" data-rel="#b" href="#">B</a></li>
                        <li><a class="button" data-rel="#c" href="#">C</a></li>
                    </ul> 

                    <div class="flr-inner">
                        <div id="a" class="container hide">
                          AAA
                        </div>
                        <div id="b" class="container hide">
                          BBB
                        </div>
                        <div id="c" class="container hide">
                          CCC
                        </div>
                    </div>

jQuery

                        // set content on click
                        $('.button').click(function(e) {
                            e.preventDefault();
                            setContent($(this));
                        });

                        // set content on load
                        $('.button.active').length && setContent($('.button.active'));

                        function setContent($el) {
                            $('.button').removeClass('active');
                            $('.container').animate({
                                height: "hide",
                                opacity: "hide"
                            }, "fast");;

                            $el.addClass('active');
                            $($el.data('rel')).animate({
                                height: "show",
                                opacity: "show"
                            }, "slow");;
                        }

但是我怎样才能切换活动的 div，让没有人是可见的？以及如何做（淡出。停止。淡入。）实际上它并行地做所有事情。

【问题讨论】：

标签： jquery html button jquery-animate toggle

【解决方案1】：

queue 选项控制等待或不结束动作 function setContent(el){ $('.button').removeClass('active'); $('.container').fadeOut({queue: true, speed: "fast"}); el.addClass('active'); $('.flr-inner ' + el.data('rel')).faseIn({speed: "slow"}); } 更多关于选项http://api.jquery.com/fadeout/

【讨论】：