jquery - 卷起并单击打开页面

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并简化您的代码，而不是 using ：

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

​</p>

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

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

window.location = "index2.html";

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

正确的script块定义

看来您也没有提供脚本块语言，这是HTML 规范的要求。第一句话说这是必须的：

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

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

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

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

Answer 2

如果您想将页面加载到content元素中（就像您使用加载方法一样），您可以使用slideUp()andslideDown()方法，目前您将 设置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"