Question

我有三个按钮（加载时无效）。当我点击按钮时，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，以便没有人可见？怎么做（fadeout。停止.fadein。）实际上它正在做所有的并行。

Answer 1

队列选项控制等待或不结束操作 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/

的更多信息

JQuery用不同的按钮切换div，单击活动按钮显示/隐藏

1 个答案: