在javascript中覆盖前面的函数答案

【问题标题】：Overriding preceding function in javascript在javascript中覆盖前面的函数
【发布时间】：2013-03-03 04:59:55
【问题描述】：

假设我有很多这样设置的 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 毫秒后消失？

【问题讨论】：

标签： javascript jquery overriding fade

【解决方案1】：

编辑：给你：

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

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

【讨论】：

您可能没有清楚地阅读我的问题。我不想延迟整个事情，我只想延迟一个 div 在父 div 内的淡入。
我相信您的函数会检查链接是否附加了“pagefooter”类。但我需要它来检查“#pageX”是否有一个名为“.pagefooter”的子 div，而不是链接
谢谢，但这似乎只适用于“#page1”。不过，我有大约 30 页，全部以“#pageX”格式命名。我的页面淡入淡出功能对所有页面都是通用的。
你使用旧语法$(this.getAttribute("href"))，这只是在 jsfiddle 上显示所需结果的示例。
感谢编辑后的版本有效。但是你能解释一下代码中的逻辑吗？我不太明白。它在我的其他页面中导致某些隐藏/显示元素的奇怪错误。例如，我有一个带有隐藏/显示问题/答案文本块的常见问题解答页面。使用此代码，问题/答案文本块会在隐藏和显示之间不断闪烁。