jQuery通过Ajax和Animate加载内容

jquery load content via ajax and animate

本文关键字：加载 Animate 通过 Ajax jQuery      更新时间：2023-09-26

>我正在通过 ajax 加载页面内容，我希望旧内容滑到顶部消失，新内容跟随它到位，我的问题是我似乎无法让新内容进行动画处理，它只是在单击按钮时呈现（但旧内容确实动画）。下面是我的JavaScript，

$("#ajax").live("click", function(e){
    var loadURL = $(this).attr('href');
    $("#information").animate{{positionTop : "-900px" }, 1000);
    $(".content").load(loadURL + " #information").animate({positionTop: "0px"}, 1000);
    e.preventDefault();
});

这是我的 HTML 标记， 

<div class="content">
    <div class="loading"></div>
    <article id="information">
        <header>
            <h1 class="beta"></h1>
            <a href="" class="learn">Learn More</a>
        </header>
        <section class="advantage">
        </section>
        <section class="advantage">
        </section>
        <section class="advantage">
        </section>
        <a class="next-advantage" id="ajax" href="/logic-combi.php">Logic+ Combi</a>
    </article>
</div>

JS请求完全相同的HTML设置，但仅来自<article id="information">

在 load 函数的回调中执行动画。

$(".content").load(loadURL + " #information", function(){
  $('#information').animate({positionTop: "0px"}, 1000);
});
positionTop不是

animate 的有效参数，您可能需要使用 scrollTop .

相关文章：