jQuery：向左滑动和向右滑动答案

【问题标题】：jQuery: Slide left and slide rightjQuery：向左滑动和向右滑动
【发布时间】：2010-03-09 18:02:14
【问题描述】：

我在 jQuery 中见过 slideUp 和 slideDown。左右滑动的功能/方式呢？

【问题讨论】：

您可以简单地执行animate({width: 0})，然后将位置设置为向右或向左，使其看起来像向右或向左滑动。

【解决方案1】：

您可以使用 jQuery UI 中的附加效果来做到这一点：See here for details

快速示例：

$(this).hide("slide", { direction: "left" }, 1000);
$(this).show("slide", { direction: "left" }, 1000);

【讨论】：

这似乎依赖于Effects Core，没有任何外部的东西就没有办法实现吗？
@Sarfraz - 我不知道，那么你无论如何都在重新发明轮子......一个可能有帮助的注释，保持隐藏/显示的方向相同，这是它的方向from or go to...这有点违反直觉，但你已经习惯了。
@Sarfraz - 如果你愿意，你可以尝试拉出你需要的部分，不过要付出很多努力，如果你要走这条路，请从这里开始：code.google.com/p/jquery-ui/source/browse/branches/dev/effects/…

【解决方案2】：

如果你不想像jQuery UI 这样臃肿，试试我的自定义动画：https://github.com/yckart/jquery-custom-animations

对你来说，blindLeftToggle 和 blindRightToggle 是合适的选择。

http://jsfiddle.net/ARTsinn/65QsU/

【讨论】：

感谢这些很棒的功能。我一直在寻找像这样简单的东西。它就像一个魅力。
当我想这样做时，控制台会告诉我Uncaught TypeError: Object [object Object] has no method 'blindLeftToggle'

【解决方案3】：

您总是可以只使用 jQuery 添加一个类，.addClass 或 .toggleClass。然后，您可以将所有样式保留在 CSS 中和脚本之外。

http://jsfiddle.net/B8L3x/1/

【讨论】：

【解决方案4】：

这段代码运行良好：

<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

注意：这是一个示例代码不要忘记添加所有脚本标签以实现代码的正常运行。

【讨论】：