Question

我正在研究以下要求。

将网站的所有部分放在单页
在一个实例中仅显示一个部分
当用户点击链接访问其他部分时 - 具有平滑的滚动效果以到达该部分。

这是我到目前为止取得的成就 http://jsfiddle.net/karuna/eqCYE/1/

这是我的代码

的Javascript

$(function(){
    //On page load hide all but the first section
$("#wrapper div[id!=red]").each(function(){
        $(this).addClass("hide");
});   

$("#mainNav a").click( function(){
    var nextSection = $(this).attr("href");
    var currentSection = $("#mainNav a.active").attr("href");

    //If link to current section clicked -- Do NOTHING
    if (currentSection == nextSection){
        return;
    }        

    else{
        //All good to slide to the section

        //Start with assigning active on nav items
        $("#mainNav a").each( function(){
            if($(this).attr("href") == nextSection){
                $(this).addClass("active");
            }
            else{
                $(this).removeClass("active");
            }
        }); 

        //Make the nextSection visible
        $(nextSection).removeClass("hide");

        //Construct an array to compute position of sections on DOM 
        var positions = new Array();
        counter =0;
        $("#mainNav a").each(function(){
            positions[counter] = $(this).attr("href");
            counter++;
        });

        //Function to compute position of an element in an array
        Array.prototype.position = function (s) {
            var i = 0;
            while (i < this.length && this [i] != s) {i++};
            return i < this.length ? i : undefined;
        }

        //If currentSection is below nextSection
        if(positions.position(currentSection) > positions.position(nextSection)){   
            $(nextSection).css("top", "-200px");
            $(currentSection).css ("top", "0px");                      
                   $(nextSection).animate({              
                         top: '0px'
                        }, { queue: false, duration: 1000 } );
                    $(currentSection).animate({              
                         top: "200px"
                        }, { queue: false, duration: 1000 });    

        }
        else if(positions.position(currentSection) < positions.position(nextSection)){  
            $(nextSection).css("top", "200px");
            $(currentSection).css ("top", "0px");                      
                   $(nextSection).animate({      
                         top: '0px'
                        }, { queue: false, duration: 1000 } );
                    $(currentSection).animate({              
                         top: "-200px"
                        }, { queue: false, duration: 1000 });   

        }   
        $(nextSection).css("top", "");
        $(currentSection).css ("top", "");  
        $(currentSection).addClass("hide");
    }       
})
});

HTML

<nav id="mainNav">
<a href="#red" class="active">Red</a>
<a href="#blue">Blue</a>
<a href="#green">Green</a>
<a href="#orange">Orange</a>
</nav>

<div id="wrapper">
<div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
    <div id="orange"></div>
</div>

CSS

body{
    width: 100%;
    height: 100%;
}
#mainNav a{
    text-decoration: none;
    color: black;
}
#mainNav a.active{
    color: red;
}
div{
    display: block;
    height: 200px;
    width: 100%;
}
div>div{
    position: relative;
}
#wrapper{
    overflow-y: scroll;
    background: grey;
}   
#red{
    background: red;
}   
#blue{
    background: blue;
}   
#green{
    background: green;
}   
#orange{
    background: orange;
}

.hide{
    display: none;
}

问题是：从一个部分滚动到另一个部分时，上一部分不可见。

任何人都可以帮我弄清楚两个动画功能为什么不同时执行。我在他们两个上添加了“queue：false”!!

使用jQuery在同一实例上为多个对象设置动画

0 个答案: