logo标签列表

jQuery: 向左滑动和向右滑动

javascriptjqueryhtmlcss
32

我在jQuery中看到了slideUp和slideDown。那么有没有左右滑动的函数/方法呢？

6
您可以简单地使用 animate({width: 0})，然后设置其位置为右侧或左侧，以使其看起来像向右或向左滑动。 - Max Shawabkeh
4个回答
76
您可以使用jQuery UI中的附加效果来实现这一点：点击此处查看详细信息 快速示例：
$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);
这似乎是依赖于Effects Core，难道没有不用任何外部工具就能实现这个的方法吗？ - Sarfraz
@Sarfraz - 据我所知没有，否则你就是在重新发明轮子...一个可能有用的提示是，保持隐藏/显示的方向相同，它是从哪里来或去的方向...这有点违反直觉，但你会习惯的。 - Nick Craver
@Sarfraz - 如果你想要的话，你可以尝试拉取你需要的那些部分，但这需要很多努力。如果你决定走这个路线，可以从这里开始：http://code.google.com/p/jquery-ui/source/browse/branches/dev/effects/ui/effects.slide.js?r=2454 - Nick Craver
22
2
感谢这些棒极了的函数...我一直在寻找像这样简单的东西。而且它运行得非常好。 - Vincent Vieira
当我想这样做时，控制台会显示以下信息： “未捕获的类型错误：对象[object Object]没有'blindLeftToggle'方法” - user2628521
6
你可以使用jQuery添加一个类，.addClass或.toggleClass。然后你可以将所有的样式都保留在CSS中，而不是脚本中。 http://jsfiddle.net/B8L3x/1/
0

这段代码运行良好：

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(document).ready(function(){
            var options = {};
            $("#c").hide();
            $("#d").hide();
            $("#a").click(function(){
                 $("#c").toggle( "slide", options, 500 );
                 $("#d").hide();
            });
            $("#b").click(function(){
                 $("#d").toggle( "slide", options, 500 );
                 $("#c").hide();
                });
            });
        </script>
        <style>
            nav{
            float:left;
            max-width:300px;
            width:300px;
            margin-top:100px;
            }
            article{
            margin-top:100px; 
            height:100px;
            }
            #c,#d{
            padding:10px;
            border:1px solid olive;
            margin-left:100px;
            margin-top:100px;
            background-color:blue;
            }
            button{
            border:2px solid blue;
            background-color:white;
            color:black;
            padding:10px;
            }
        </style>
    </head>
    <body>
        <header>
            <center>hi</center>
        </header>
        <nav>
            <button id="a">Register 1</button>
            <br>
            <br>
            <br>
            <br>
            <button id="b">Register 2</button>
         </nav>

        <article id="c">
            <form>
                <label>User name:</label>
                <input type="text" name="123" value="something"/>
                <br>
                <br>
                <label>Password:</label>
                <input type="text" name="456" value="something"/>
            </form>
        </article>
        <article id="d">
            <p>Hi</p>
        </article>
    </body>
</html>

参考：W3schools.com和jqueryui.com
注意：这是一个示例代码，请不要忘记添加所有的脚本标签以实现代码的正常运行。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接