jquery 滑出页面
Posted
技术标签:
【中文标题】jquery 滑出页面【英文标题】：jquery slide off page 【发布时间】：2011-06-29 23:54:14 【问题描述】：我正在尝试在页面加载和按钮单击时创建一些动画。
页面加载时，div 应该从页面底部滑入。当用户单击按钮时，div 会从页面顶部滑出，然后在滑出完成后转到 URL。
加载功能（从底部滑入）根本不触发，我不知道如何告诉它在动画完成后转到URL。 Here is a jsFiddle.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div id="content-container">
<div id="content" style="position:relative; z-index:2000;" >
<a href="http://google.com" id="moveUp"><button>button</button></a>
</div>
</div>
<div id="panel">
<div class="content">
<img src="http://www.google.com/images/logos/ps_logo2.png" ><br /><br />
</div>
</div>
<script>
// On load panel slides in from bottom of page
$(function()
$("#panel").one('load', function ()
$("#panel").animate(
marginBottom: "-=1250px", height: "+=50px" , 1000);
).each(function()
if(this.complete) $(this).load();
);
);
// On click slide panel off the top of page
$("#moveUp").click(function()
$("#panel").animate(
marginTop: "-=250px",
height: "+=50px"
, 1000);
// After animation completes THEN go to URl???
$(this)........;
);
</script>
</body>
【问题讨论】：
你没有告诉我们错误到底是什么。请告诉我们您遇到的问题，我们可以尽力提供帮助！ 谢谢@slifty 我编辑了文本。加载不起作用，我不知道如何在引用 URL 之前告诉动画完成 感谢您的编辑-但我仍然需要您告诉我您所说的“不起作用”是什么意思-例如，您的意思是根本不会触发吗？确实如此，但什么也没发生？它会导致意外的动画？如果您有 FireBug 或 Chrome，您可以查看控制台和 DOM 以了解发生了什么情况。 @slifty 加载时不会触发，似乎脚本将其视为图像而不是尝试加载整个 div。如果有帮助，我已经上传了jsfiddle。 【参考方案1】：很难尝试并准确确定您要完成的工作，但是 jsFiddle 可能会有所帮助
我所做的只是绝对定位 div，然后在加载时更改 top 值，使其从底部开始动画。
【讨论】：
就是这样！您的解决方案与@slifty 的解决方案完全符合我的预期。非常感谢！ @Josh - 没问题 :) 很高兴我能帮上忙【参考方案2】：关于您的负载问题：
记住，$(function());语法是以下的简写：
$(document).load(function() )
换句话说，当代码运行时，#panel 已经加载完毕。这就是为什么您的事件处理程序永远不会被调用的原因！在触发事件之前，您不会添加侦听器
试试这个：
$(function()
$("#panel").animate(
marginBottom: "-=1250px", height: "+=50px" , 1000);
);
);
对于动画发出后的URL，可以通过传入第三个参数来为动画添加回调。此参数允许您定义一个在动画完成后调用的函数。
试试这个：
$("#moveUp").click(function()
$("#panel").animate(
marginTop: "-=250px",
height: "+=50px"
, 1000,
function()
window.location="http://google.com";
);
);
【讨论】：
好了！哎呀，现在我明白我做错了什么。谢谢老哥！以上是关于jquery 滑出页面的主要内容，如果未能解决你的问题，请参考以下文章
jquery slideToggle() 不是“滑入”而是滑出
jquery tabslideout 插件并想检测 div 何时滑入和滑出