jQuery:向左滑动，向右滑动

I have seen slideUp and slideDown in jQuery. What about functions/ways for sliding to left and right?

我看到过jQuery中的滑动和滑动。向左或向右滑动的函数/方法是什么?

4 个解决方案

#1

You can do this with the additional effects in jQuery UI: See here for details

您可以使用jQuery UI中的附加效果来实现这一点:详情请参见这里

Quick example:

简单的例子:

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

#2

If you don't want something bloated like jQuery UI, try my custom animations: https://github.com/yckart/jquery-custom-animations

如果您不想要jQuery UI之类的东西，请尝试我的自定义动画:https://github.com/yckart/jquery-custom-animation

For you, blindLeftToggle and blindRightToggle is the appropriate choice.

对你来说，蒙眼和盲眼是最合适的选择。

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

#3

You can always just use jQuery to add a class, .addClass or .toggleClass. Then you can keep all your styles in your CSS and out of your scripts.

您可以使用jQuery添加类. addclass或. toggleclass。然后，您可以将所有样式保存在CSS中，而不是脚本中。

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

#4

This code works well : $(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(); }); }); 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; } hi Register 1

Register 2

这段代码运行良好:$(文档).ready(函数){var options = {};$(" # c”)hide();$(" # d ")hide();$(" # ").click(函数(){ $(" # c”)。切换(“幻灯片”，选项500);$(" # d ")hide();});$(" # b”).click(函数(){ $(" # d”)。切换(“幻灯片”，选项500);$(" # c”)hide();});});nav {浮动:左;max-width:300 px;宽度:300 px;margin-top:100 px;} {条margin-top:100 px;身高:100 px;d c } #,# {填充:10 px;边界:1 px固体橄榄;margin-left:100 px;margin-top:100 px;背景颜色:蓝色;按钮{边框:2px纯蓝色;背景颜色:白色;颜色:黑色;填充:10 px;} hi寄存器1寄存器2

    <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>

Reference:W3schools.com and jqueryui.com

参考:W3schools.com和jqueryui.com

Note:This is a example code don't forget to add all the script tags in order to achieve proper functioning of the code.

注意:这是一个示例代码，不要忘记添加所有的脚本标记，以实现代码的正常功能。

#1