0

我在一个页面上有很多页面（div），我需要一个函数来淡入/淡出这些页面。到目前为止，我有：

HTML：

<body>

    <div class="menulink">
    <a href="#page2" class="link" onclick="return false">
        ABOUT EVENT
    </a>
    </div>

    <div class="menulink">
    <a href="#page3" class="link" onclick="return false">
        OTHER EVENTS
    </a>
    </div>

    ... <!--LOTS OF OTHER LINKS-->
    ...

    <div class="pagecontainer">


    <div id="homepage">
        content
    </div>

    <div id="page2">
        content
    </div>

    ...<!--LOTS OF OTHER DIVS-->

    </div>

</body>

脚本：

<script type="text/javascript">

    $(document).ready(function() {

        e.preventDefault();

        $('.link').on('click', function(e){
            var targetpage = $($(this).attr("href"));
            $('.pagecontainer>div').fadeOut(function() {
                $(targetpage).show();
            });
        });

    });

</script>

CSS：

.pagecontainer {
overflow:hidden;
width:90%;
min-width:800px;
padding:50px 0;
min-height:450px;
}

.pagecontainer>div{
display: none;
padding-left:50px;
padding-right:50px;
position:relative;
}

#menu {
display:none;
width:90%;
height:40px;
margin:auto;
}

这适用于淡入/淡出各种页面，但它的作用是首先显示目标页面，然后淡出前一页。这会导致目标页面显示在某个随机位置等待上一个淡出，然后目标页面将“跳转”到正确的位置。

感谢帮助。

4

1 回答 1

0

您可以通过使用 jQuery 的promise()和done()方法等待事件队列完成来解决这个问题。

 $('.pagecontainer>div').fadeOut(500).promise().done(function() {
      $(targetpage).fadeIn(500);
 });

这将首先淡出所有页面，然后在完成后淡入目标。

于 2013-11-12T20:51:10.680 回答