网站右边栏导航 jquery 处理

这里要使用mouseenter 和 mouseleave，并且使用定时器及时清除定时效果，达到这样的要求:

当用户停留在div上0.2秒后才触发右边栏的显示和隐藏。

默认状态：

展开状态如图：

 

刚开始的方案：

var rightbar = $("#NavRightbar");
if(rightbar.length>0){

　　rightbar.bind("mouseenter", function (e){
    　　var _ = $(this);
    　　_.stop().animate({"right" : "-"+sRL}, 250);//移进就直接触发显示，没有过度
   　　e.stopPropagation();
　　}).bind("mouseleave", function (e){
   　　var _ = $(this);
   　　_.stop().css("right", options.rightDone);//如果移出就直接马上恢复默认状态。
　　　　
　　　　e.stopPropagation();
　　});
}

这个方案的弊端是，但用户快速的扫描过这个Div时，原本不打算显示，但依然会有触发，用户体验不是很好。

 

所以，有这个利用定时器实现的优化方案

var timer = "";
rightbar.bind("mouseenter", function (e){
    var _ = $(this);
     _.css("right",options.rightDone);//首先初始化为默认状态 --- 一切操作都始于默认状态
　　 if(timer!="") {
　　　　 clearTimeout(timer);//移进必须清除定时器
　　 }
    timer = setTimeout(function (){
        _.stop().animate({"right":"-"+sRL}, 250);//展开
    },200);
    e.stopPropagation();
}).bind("mouseleave", function (e){
    var _ = $(this);
    clearTimeout(timer);//如果timer正开始，此时移出，停止展开
    _.css("right",options.rightDone);//首先初始化默认状态 --- 一切操作都始于默认状态
    timer = setTimeout(function (){
        _.stop().animate({"right":options.rightDone}, 250);//收缩
    },200);
    e.stopPropagation();
});

实现了需求。

主要的应用是 jQuery的 animate() 之前的 stop()和 setTimeout()的应用