jquery滑出页面
我正在尝试在页面加载和按钮单击时创建一些动画。
页面加载时，div 应从页面底部滑入。当用户单击按钮时，div 会从页面顶部滑落，滑落完成后转到 URL。
加载函数（从底部滑入）根本不会触发，而且我不知道如何告诉它在动画完成后转到 URL。 这是一个 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" width="122"><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>
I am trying to create a few animations on page load and on button click.
On page load, the div should slide in from the bottom of the page. When the user clicks the button, the div slides off the top of the page then goes to the URL after the slide off completes.
The on load function (slide in from bottom) doesnt trigger at all, and I dont know how to tell it to go to the URL after the animation completes. 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" width="122"><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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试并准确地弄清楚你想要完成的事情是很困难的，但这
jsFiddle 可能会有所帮助
我所做的就是绝对定位 div，然后在加载时更改 < code>top 值，以便它从底部开始动画。
It's difficult to try and work out exactly what you are trying to accomplish but this
jsFiddle might help
All i've done is absolutely positioned the div and then on load change the
topvalue so that it animates in from the bottom.关于您的加载问题：
记住，$(function());语法是以下形式的简写：
$(document).load(function() {})
换句话说，当代码运行时，#panel 已经加载完毕。这就是为什么你的事件处理程序永远不会被调用！在事件被触发之前，您不会添加侦听器
。请尝试以下操作：
对于动画问题后的 URL，您可以通过传入第三个参数来向动画添加回调。此参数允许您定义一个在动画完成后调用的函数。
试试这个：
Concerning your on load issue:
Remember, the $(function()); syntax is shorthand for:
$(document).load(function() {})
In other words, by the time that code is run #panel will have already loaded. This is why your event handler is never being called! You aren't adding the listener until after the event has already been triggered
Try this instead:
As for the URL after animate issue, you can add a callback to an animation by passing in a third parameter. This parameter lets you define a function which gets called after the animation completes.
Try this: