动画菜单导航条的Demo

做了这样一个动画菜单导航条的效果。其实也就是两个小效果的结合。

1.导航栏$('.navbox')的点击事件,实现导航条逐步显现。
2.导航条li元素的:hover,实现颜色、子元素字体颜色等等的变化。

下面简单说下导航栏的点击事件。

[lang:JavaScript]
var $li = $("#wrapper .nav li"),
    $navbox = $("#wrapper .navbox"),
    aLeft = [];
(function(){
    var li_width = $li[0].offsetWidth;
    var m = 0, sLeft ="";
    for (var i = $li.length;i--; ) {
        m = li_width * (i + 1);
        sLeft = ((i % 2) ? m : (-m)) + "px";
        $li[i].style.left = sLeft;
        aLeft.push(left);
    }
    aLeft.reverse();
})();

li元素我是相对定位的,上面我获取了li元素的width,然后用一个小技巧(第几个元素)决定了left,并放进一个数组以供下次隐藏li元素时候使用。这算是初始化。

然后导航条逐步显现我弄了两个方案:
(1).在速度相同并且是匀速(每隔一段时间移动的像素值一样)的情况下,将各个li移动到相应的位置。可以自己写这样一个简单的函数,比如设置一个定时器,每30ms改变5px,那么其到达相应位置的时间也就可以不一样。或者使用JQuery。这里需要注意的是,JQuery的animate,尽管那个参数的位置是速度,但其实相反,这个数值类似动画执行时间,数值越大,元素其到达目标点时间越大,也就是速度反而越慢。除此之外,如果这几个li元素设置的是相同的这个参数$li.animate({'left': "0px"},500),它们会几乎同时到达相应位置。所以这里,再次利用了i。

function hide($li) {
    var $l = null; 
    for (var i = $li.length; i--;) {
        $l = $($li[i]);
        $l.animate({'left': aLeft[i]},i*1000,'linear');
    }
}

这个方案其实是有问题的,想要达到的效果是,速度很快,第一个li到达相应位置之后,第二个li也快速到达,以此类推。而这个方案呢?因为在一个for循环中,设置动画的定时器,所以,几乎是同时执行了这几个元素的动画。也就不可能达到Demo的效果。

(2).于是只能换另一个方案,在上个li动画结束之后,再用callback回调函数。这里我用了闭包传递参数,指定下一个动画对象,然后递归调用执行。

function hide($li) {
    var $l = null; 
    var i = $li.length;
    (function cal(i){
        if(i--){
            $l = $($li[i]);
            $l.animate({'left': aLeft[i]}, 100, function(i){
                return function(){
                    cal(i);
                }
            }(i));
        }
    })(i);
}
function show($li) {
    var $l = null; 
    var i = 0;
    (function cal(i){
        if(i >= $li.length){
            return;
        }
        $l = $($li[i]);
        i++;
        $l.animate({'left': 0}, 100, function(i){
            return function(){
                cal(i);
            }
        }(i));
    })(i);
}

最后指定事件函数也就完成了。因为JQuery 1.9之后的toggle方法移除了传递多个函数模拟连续点击的功能,于是用个小闭包。

var m = true;
$navbox.on('click',function(){
    $li.stop(true);
    m ? show($li) : hide($li);
    m = !m;
})

至于导航栏$('navbox')颜色的变化,可以用简单的css()方法,不过这样直接改变未免突兀,所以用了JQuery UI库,animate()方法也就可以作用backgroundColor等等其他CSS属性。

而关于各个li:hover,只是简单用了CSS3的过渡transition属性,这个稍微了解的也就不必赘述了。而那些图标的话,用了CSS3的@font-face,注册的字体是,“WebSymbols-Regular”