如何为removeClass jQuery添加幻灯片效果答案

【问题标题】：How to add a slide effect to removeClass jQuery如何为removeClass jQuery添加幻灯片效果
【发布时间】：2012-08-20 16:15:45
【问题描述】：

我几天来一直试图在 Google 上找到我的问题的答案，但没有任何运气，所以我希望这里有人可以提供帮助。

代码可以在这个链接http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu找到，它只是一个垂直标签菜单，我已经让它在点击而不是悬停时改变。

我想要的是在点击时内容向上滑动，新内容向下滑动（取决于点击了哪个选项卡，如果有意义，它是向上还是向下）。

这是它的 jQuery：

<script language="JavaScript">
        $(document).ready(function() {
            $(".tabs .tab[id^=tab_menu]").click(function() {
                var curMenu=$(this);
                $(".tabs .tab[id^=tab_menu]").removeClass("selected")
                curMenu.addClass("selected")

                var index=curMenu.attr("id").split("tab_menu_")[1];
                $(".curvedContainer .tabcontent").css("display","none")
                $(".curvedContainer #tab_content_"+index).css("display","block")
            });
        });
    </script>

更新这是小提琴http://jsfiddle.net/swift29/4pVtB/

提前致谢，斯威夫特。

【问题讨论】：

我想要的是向上滑动的内容和向下滑动的新内容（取决于点击了哪个选项卡，如果有意义，它是向上还是向下）不，这没有意义。请详细说明。
有一个 jsfiddle 显示为演示？
你能把你的css和代码添加到fiddle吗？

标签： jquery tabs slide removeclass

【解决方案1】：

也许这个FIDDLE 就足够了。您只需调用 .slideup/slideDown 方法，而不是简单地使用 display:block/none

$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");

    var index=curMenu.attr("id").split("tab_menu_")[1];
    $(".curvedContainer .tabcontent").slideUp('fast');
    $(".curvedContainer #tab_content_"+index).slideDown('fast');
});
});

【讨论】：

非常感谢，我不敢相信我没有想到这一点。是否可以将新旧幻灯片放在一起而不是新幻灯片与上一张重叠？
@swift29，如果我没听错的话，所有 jQuery 动画 afaik 都是异步执行的，它们不相互依赖。它对你有用吗？
我的意思是有点像旋转木马风格，而不是重叠，虽然我只是好奇，但没关系。

【解决方案2】：

一个小模组：http://jsfiddle.net/4pVtB/7/

$(document).ready(function() {
    $(".tabs .tab[id^=tab_menu]").click(function() {
        var curMenu = $(this);
        var cur_index=curMenu.attr("id").split("tab_menu_")[1];
        var old_index=$(".tabs .selected").attr("id").split("tab_menu_")[1];
        if (cur_index==old_index) {
            return;
        }
        $(".tabs .tab[id^=tab_menu]").removeClass("selected");
        curMenu.addClass("selected");
        $("#tab_content_"+old_index).slideUp('slow');
        $("#tab_content_"+cur_index).slideDown('slow');
    });
});

【讨论】：