Question

说我有很多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毫秒，但在父div“#pageX”中保留“.pagefooter”。现在当我调用“$（this.getAttribute（”href“））。fadeIn（）;”它会同时在“#pageX”中淡出。

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

Answer 1

编辑：你走了：

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

这是一个有效的演示：http://jsfiddle.net/mFjg5/1

在javascript中覆盖前面的函数

1 个答案: