Question

我正在尝试在页面加载和按钮点击上创建一些动画。

在页面加载时，div应从页面底部滑入。当用户单击该按钮时，div会从页面顶部滑出，然后在滑动完成后转到URL。

on load功能（从底部滑入）根本没有触发，我不知道如何告诉它在动画完成后转到 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>

Answer 1

很难尝试确切地解决你想要完成的事情但是这个 jsFiddle可能有帮助

我完成的所有操作都绝对定位div，然后在加载时更改top值，以便从底部开始设置动画。

Answer 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滑下页面

2 个答案: