jquery slide切换方向
Posted
技术标签:
【中文标题】jquery slide切换方向【英文标题】：jquery slideToggle direction 【发布时间】：2011-07-02 07:49:29 【问题描述】：我正在尝试滑动 jquery .slideToggle，但我无法在单击 div（导航）时从左到右或从右到左添加方向。请帮帮我，下面是我的代码。
<!DOCTYPE html>
<html>
<head>
<style>
p width:400px; float:right;background:#e4e4e4; margin:5px;padding:5px;
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body style="font-size:10px; color:#333;">
<div style="width:50px; height:15px;float:right;background:#ccc;border:1px solid #333;text-align:center;">Nav</div>
<p>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
<script>
$("div").click(function ()
$("p").slideToggle("slow");
);
</script>
</body>
我是 jquery 新手，非常感谢您的帮助。
【问题讨论】：
slideToggle 的默认行为是向上滑动或向下滑动。你想让你的向左滑动和向右滑动吗？
【参考方案1】：您需要为文本添加父级。
<body>
<div class="nav">Nav</div>
<div class="text">
<p>This is the paragraph to end all paragraphs. You should feel <em>lucky</em> to have seen such a paragraph in your life. Congratulations!</p>
</div>
</body>
风格：
body
font-size: 10px;
color: #333;
.nav
float: right;
width: 50px;
height: 30px;
text-align: center;
background: #ccc;
border: 1px solid #333;
.text
overflow: hidden;
float: right;
margin: 5px;
padding: 5px;
width: 400px;
background: #e4e4e4;
还有 javascript：
$('.nav').click(function()
$('.text p').css(
'width': $('.text p').width(),
'height': $('.text p').height()
);
$('.text').animate('width': 'toggle');
);
你有一个演示：http://jsfiddle.net/abwVd/
【讨论】：
【参考方案2】：jquery 中 slideToggle 的默认行为是“向上滑动”或“向下滑动”。如果您希望<p>“向左滑动”和“向右滑动”，您可以使用 jquery ui 中提供的“滑动”效果。方向参数接受 'up','down','left','right' 作为有效值。 http://docs.jquery.com/UI/Effects/Slide
【讨论】：
【参考方案3】：你可以这样做：
p width:400px; position: absolute; background:#e4e4e4; margin:5px;padding:5px;
（使用绝对位置而不是右浮动）
还有这个：
$(document).ready(function()
var $elem = $("p");
var docwidth = $(document).width();
var inileft = docwidth - $elem.outerWidth();
$elem.css("left", inileft); //Position element tho the right
$("div").click(function () //This slides
$elem.animate(
left: (parseInt($elem.css("left"), 10) >= docwidth ? inileft : docwidth)
);
);
);
通过使用 animate，您可以制作非常自定义的动画。 希望这可以帮助。干杯
【讨论】：
非常感谢您的快速回复，但这不起作用:(请参阅下面的链接jsfiddle.net/sanketrajdeora/CJLT3【参考方案4】：<script>
$("div").click(function ()
$("p").slideToggle("slow", direction: "left", 100);
);
</script>
【讨论】：
以上是关于jquery slide切换方向的主要内容，如果未能解决你的问题，请参考以下文章