0

假设我有很多 div “页面”设置如下：

<script type="text/javascript">

$('.link').on('click', function(e){
    fadeOutPage();
    $(this.getAttribute("href")).fadeIn(); //fade in clicked page
});

function fadeOutPage() {
    $('#container>div').fadeOut(); //fade out all displayed pages
}

</script>

<a href="#page1" class="link">page 1</a>
<a href="#page2" class="link">page 2</a>
<a href="#page3" class="link">page 3</a>

.... 
....

<div id="container">

    <div id="page1">
        <div class="navbar"> contents of navbar 1 </div>
        <div class="pagecontents"> contents of page 1 </div>
        <div class="pagefooter"> more contents for page 1 </div>
    </div>

    <div id="page2">
        <div class="navbar"> contents of navbar 2 </div>
        <div class="pagecontents"> contents of page 2 </div>
        <div class="pagefooter"> more contents for page 2 </div>
    </div>

    <div id="page3">
        <div class="navbar"> contents of navbar 3 </div>
        <div class="pagecontents"> contents of page 3 </div>
        <div class="pagefooter"> more contents for page 3 </div>
    </div>

    ...
    ...

</div>

这可以按我的意愿工作，淡出所有页面，然后在我单击链接时淡入单击的页面。但我想延迟 ".pagefooter" 的淡入，比如说 1000 毫秒，但将 ".pagefooter" 保留在父 div "#pageX" 中。现在当我调用 "$(this.getAttribute("href")).fadeIn();" 它会同时淡入“#pageX”。

如何覆盖它，以便我可以在某处插入 settimeout(function() {('.pagefooter').fadeIn()},1000) ，以便除“.pagefooter”之外的所有其他内容正常淡入，然后“.pagefooter”之后在 1000 毫秒内消失？

4

1 回答 1

1

编辑：给你：

$('#page1').show().find('div').hide().filter(function () {
    return !$(this).hasClass('pagefooter');
}).fadeIn().add('.pagefooter').delay(1000).fadeIn();

这是一个工作演示：http: //jsfiddle.net/mFjg5/1

于 2013-03-03T05:06:18.873 回答