如何用jquery从右上角滑动一个div？
Posted
技术标签:
【中文标题】如何用jquery从右上角滑动一个div？【英文标题】：How to slide a div from the top right corner with jquery? 【发布时间】：2013-05-19 20:03:13 【问题描述】：我有一些隐藏的 div，当单击按钮时，我想显示一个 div。
我见过slideDown，但这并不是我想要的。我希望隐藏的 div 从无到有增长到原始大小，并从（隐藏）div 的右上角执行此操作。
【问题讨论】：
使用淡入代替向下滑动 也许是动画？ api.jquery.com/animate你能发布一些你迄今为止尝试过的代码以便我们提供帮助吗？ 【参考方案1】：$("#box").show('size', origin: ["top", "right"] , 2000);
如果您希望能够使用相同的事件隐藏它，请使用具有相同参数的 .toggle()。
第一个参数是我们正在使用的效果，size。第二个参数是一个特定于这个效果的选项对象，我们只使用origin 来指定它应该从哪里调整大小。第三个参数是以毫秒为单位的持续时间，您可以随意更改。
现场示例：http://jsbin.com/uwonun/1
【讨论】：
【参考方案2】：从无到有变成原来的大小，并从（隐藏的）div 的右上角开始。
我认为切换可以满足您的需要...
试试这个
html
<div id="test"></div>
<button id="button">click</button>
jquery
$(function()
$("#button").click(function()
$('#test').toggle('slow');
);
);
如果您在第二次点击时不需要任何动画，那么您可以使用one()
$(function()
$("#button").one('click',function()
$('#test').toggle('slow');
);
);
fiddle here
【讨论】：
这确实是我想要的效果，但是它从左上角而不是右上角显示div..【参考方案3】：这不完全是你想要的，但它可能会被修改：
您可以通过"size" 参数在您的潜水中使用jQuery UI .effect 方法。这可以在选项中进行自定义，您应该能够在此处了解如何：
http://jqueryui.com/effect/
祝你好运，我希望这会有所帮助！
【讨论】：
【参考方案4】：试试这个
<html>
<head>
<style type="text/css">
#slideDivdisplay:none;width:400px;height:300px;position:absolute;top:0;right:0;background:#ff0000;color:#fff;
</style>
</head>
<body>
<div id="slideDiv"> </div>
<button id="startSlide">Start Slide</button>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
$('#startSlide').on('click', function()
$('#slideDiv').toggle('slow', function() );
)
)
</script>
</body>
</html>
我希望这会有所帮助。
【讨论】：
【参考方案5】：不确定这是否是黑客行为。但是，我刚刚发现我（和你）在没有 jQuery UI 的情况下得到了我想要的东西（我立即从我的 yeoman/bower 构建中删除了该库）：
var isLeft = !$myRelorAbsDiv.position().left; // 2-col layout, with floated divs
$myRelorAbsDiv.css(isLeft? "left":"right", 0).show("slow");
在 2-col（仅基于容器的宽度...所有内部 div 都向左浮动）布局中，上面的代码导致（由于在 show 方法调用之前的 css 定位）动画从右侧发生当在右列时（左动画，如果在左边，第一列）。我几乎引入了 jquery-ui 来做到这一点！废话:)
【讨论】：
顺便说一下，您需要先显示（）隐藏的 div，以便它获得“布局”。 另外，使用 jQuery 1.9 测试，在所有浏览器中低至 IE8。效果一样。以上是关于如何用jquery从右上角滑动一个div？的主要内容，如果未能解决你的问题，请参考以下文章