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 に答える