单击后卷起并打开页面

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()方法，目前您将height设置为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"