jQuery：向左滑动并向右滑动
[英]jQuery: Slide left and slide right
问题描述
I have seen slideUp and slideDown in jQuery. 
我在jQuery中看到了slideUp和slideDown 。 What about functions/ways for sliding to left and right? 左右滑动的功能/方式怎么样？
4 个解决方案
解决方案1
68 已采纳 2010-03-09 18:03:46
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
21 2012-09-16 12:54:31
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-animations
For you, blindLeftToggle and blindRightToggle is the appropriate choice. 对你来说， blindLeftToggle和blindRightToggle是合适的选择。
http://jsfiddle.net/ARTsinn/65QsU/ http://jsfiddle.net/ARTsinn/65QsU/
解决方案3
5 2013-10-30 19:42:40
You can always just use jQuery to add a class, .addClass or .toggleClass . 您始终可以使用jQuery添加类， .addClass或.toggleClass 。 Then you can keep all your styles in your CSS and out of your scripts. 然后，您可以将所有样式保存在CSS中，而不是脚本中。
解决方案4
0 2017-05-14 14:46:51
This code works well : 这段代码效果很好：
<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>
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. 注意：这是一个示例代码，不要忘记添加所有脚本标记以实现代码的正常运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.