jquery 滑出页面答案

【问题标题】：jquery slide off pagejquery 滑出页面
【发布时间】：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" 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>

【问题讨论】：

你没有告诉我们错误到底是什么。请告诉我们您遇到的问题，我们可以尽力提供帮助！
谢谢@slifty 我编辑了文本。加载不起作用，我不知道如何在引用 URL 之前告诉动画完成
感谢您的编辑-但我仍然需要您告诉我您所说的“不起作用”是什么意思-例如，您的意思是根本不会触发吗？确实如此，但什么也没发生？它会导致意外的动画？如果您有 FireBug 或 Chrome，您可以查看控制台和 DOM 以了解发生了什么情况。
@slifty 加载时不会触发，似乎脚本将其视为图像而不是尝试加载整个 div。如果有帮助，我已经上传了jsfiddle。

标签： jquery ajax jquery-animate slide

【解决方案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";
    });
});

【讨论】：

好了！哎呀，现在我明白我做错了什么。谢谢老哥！