Jquery 导航幻灯片问题

我正在尝试为一个网站做这个导航，它现在似乎可以工作了，我只是不能得到正确的动画。我曾尝试使用动画，但我无法使它工作，我不知道这是否是最好的方式去绕过它

我希望我的菜单从它们所在的一侧滑入，而不是像标准的.show/.hide那样从上角向下缩放

HTML

<div class="wrapper">
    <div class="nav">
        <a href="#" class="nav-show">menu</a>
        <a href="#" class="search-show">search</a>

        <div class="nav-wrap">
            <ul>
                <li><a herf="#">1</a></li>
                <li><a herf="#">2</a></li>
                <li><a herf="#">3</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
            </ul>
        </div>

        <div class="search-wrap">
            <ul>
                <li><a herf="#">1</a></li>
                <li><a herf="#">2</a></li>
                <li><a herf="#">3</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
                <li><a herf="#">4</a></li>
            </ul>
        </div>
    </div>
</div>

JQUERY

$(document).ready(
    function(){
        $(".nav-show").click(function () {
            $(".search-wrap").hide("slow");
            $(".nav-wrap").toggle("slow");
        });

        $(".search-show").click(function () {
            $(".nav-wrap").hide("slow");
            $(".search-wrap").toggle("slow");
        });
    });

我还发了一封信

---

我知道我的jquery代码不是最好的，我在这里是新手，所以如果它可以做得更聪明，我很乐意看到它。也许只使用CSS3制作动画会更好？

根据您的需要修复了它

新的

HTML:

---

根据您的需要进行修复

新的

HTML:

---

尝试使用easing插件，看起来很棒：

$(document).ready(
    function(){
        $(".nav-show").click(function () {
            $(".search-wrap").hide("slow");
            $(".nav-wrap").toggle('slide', {direction: 'left'}, 1000, "easeOutExpo");
        });

        $(".search-show").click(function () {
            $(".nav-wrap").hide("slow");
            $(".search-wrap").toggle('slide', {direction: 'right'}, 1000, "easeOutExpo");
        });
    });

---

尝试使用easing插件，看起来很棒：

$(document).ready(
    function(){
        $(".nav-show").click(function () {
            $(".search-wrap").hide("slow");
            $(".nav-wrap").toggle('slide', {direction: 'left'}, 1000, "easeOutExpo");
        });

        $(".search-show").click(function () {
            $(".nav-wrap").hide("slow");
            $(".search-wrap").toggle('slide', {direction: 'right'}, 1000, "easeOutExpo");
        });
    });

---

也许这会有帮助啊看起来我看错了我以为你想让它从左边滑下来，但是是的，YaMo的链接会让你在不需要jQuery的情况下使用第二个答案，但是我需要90%的宽度，而不是固定的宽度-那么这个例子不会起作用吧？如果你想使用它，放松插件会产生很好的效果，也许这会有帮助啊，看起来我看错了，我想你希望它从现在开始往下滑左边，但是YaMo的链接会让你不用jQuery就可以使用第二个答案，但是我需要90%的宽度，而不是固定的宽度-那么这个例子不会起作用吧？如果你想使用它，放松插件会产生很好的效果是的，但是我希望它从侧面滑入，而不是从顶部滑入。。。对不起，如果我没有说清楚。谢谢你，但是我会选择最后一个，因为需要的代码很少。是的，但是我希望它从侧面滑入，而不是从顶部滑入。。。如果我没有说清楚，很抱歉。谢谢，但我会选择最后一个，因为所需的代码量很小。不，如果你不想放松，只需删除“easeOutExpo；”）不，如果你不想放松，只需删除“easeOutExpo”；）

$(document).ready(
function(){
    $(".nav-show").click(function () {
        $(".search-wrap").hide('slide', {direction: 'right'}, 1000);
        $(".search-wrap").addClass("hidden");
        if($(".nav-wrap").hasClass('hidden')){
            $(".nav-wrap").show('slide', {direction: 'left'}, 1000);
            $(".nav-wrap").removeClass("hidden");
        } else {
            $(".nav-wrap").addClass("hidden");
            $(".nav-wrap").hide('slide', {direction: 'left'}, 1000)
        }
    });

    $(".search-show").click(function () {
        $(".nav-wrap").hide('slide', {direction: 'left'}, 1000);
        $(".nav-wrap").addClass("hidden");
        $(".search-wrap").show('slide', {direction: 'right'}, 1000);

        if($(".search-wrap").hasClass('hidden')){
            $(".search-wrap").show('slide', {direction: 'right'}, 1000);
            $(".search-wrap").removeClass("hidden");
        } else {
            $(".search-wrap").addClass("hidden");
            $(".search-wrap").hide('slide', {direction: 'right'}, 1000)
        }

    });
});

$(document).ready(
    function(){
        $(".nav-show").click(function () {
            $(".search-wrap").hide("slow");
            $(".nav-wrap").toggle('slide', {direction: 'left'}, 1000, "easeOutExpo");
        });

        $(".search-show").click(function () {
            $(".nav-wrap").hide("slow");
            $(".search-wrap").toggle('slide', {direction: 'right'}, 1000, "easeOutExpo");
        });
    });