卷起并单击打开页面

Question

我想做的是：

• 点击按钮后，页面的一部分（实际按钮所在的位置 + 更多项目）被卷起（向上滑动），完成后
• 用户被带到另一个页面

到目前为止我所做的代码如下（显然不起作用）：

<div id="content">
    <div>
        <p>something anything</p>
        ...
    </div>
<a id="roll"><img src="_images/butt-submit.png"></a>

</div>


<script>

$('#roll').click(function() {
     $('#content').animate({
          "width" : "100%",
          "height" : "0px"
         }, function() {
     $(this).load('index2.html');
        });
});

</script>

你能帮我解决这个问题吗？

Answer 1

正如JSFiddle 所示，这应该可以解决问题

$("#roll").click(function() {
     $("#content").animate({
          width: "100%",
          height: "0px"
     }, function() {
         window.location.href = "index2.html";
     });
});

但是，除了使用animate，您还可以使用slideUp 并简化您的代码：

$("#roll").click(function() {
     $("#content").slideUp(function() {
         window.location.href = "index2.html";
     });
});

​

为什么是location.href 而不仅仅是location？

如您所见，我使用了window.location.href，而我可以轻松地使用：

window.location = "index2.html";

这同样可以跨浏览器工作，但由于window.location 是一个对象，因此如果您使用更长的符号并定位特定的字符串属性会更清楚。

正确的script 块定义

您似乎也没有提供脚本块语言，这是as per HTML specification 的要求。第一句话说这是必须的：

_{HTML 4.01
18.2.2 指定脚本语言}

必须为文档中的每个 SCRIPT 元素实例指定类型属性。

在您的情况下，这意味着必须为 script 块提供语言，否则它们可能不会首先被识别为脚本块：

<script type="text/javascript">
...
</script>

Answer 2

如果您想将页面加载到content 元素中（因为您正在使用加载方法），您可以使用slideUp() 和slideDown() 方法，目前您正在设置@ 987654324@改为0，看不到加载的内容。

$(function() { // when the DOM is ready
   $('#roll').click(function(event) {
       event.preventDefault() // prevent the default action of the event
       $('#content').slideUp(function() {
            $(this).load('index2.html', function(){ // when load is complete
               $(this).slideDown() // slide down the #content element 
            });
       });
   });
})

如果你想将用户重定向到另一个页面，你可以使用window.location.href，但为什么不使用href属性：

<a id="roll" href='index2.html'><img src="_images/butt-submit.png"></a>

Answer 3

线

$(this).load('index2.html');

用于 AJAX 将第二个页面加载到 DOM 元素中（在本例中为 #roll）。如您所说，如果您想将用户带到另一个页面，请使用：

window.location = 'index2.html';

Answer 4

用户被带到另一个页面

为了执行该任务，您应该使用：

location.href = "index2.html"