navslider

navSlider 类
function navSlider(navArea,curEle,sliderEle,targetEle){
                    this.navArea = navArea;
                    this.curEle = curEle;
                    
                    var slider = sliderEle;
                    var curPos = (this.curEle.length > 0)? this.curEle.position().left : 0;
                    var curWidth = (this.curEle.length > 0)? this.curEle.outerWidth(true):0;
                    var target = targetEle;
                    
                    this.int = function(){
                        if(this.curEle.length > 0){
                            slider.animate({
                                "left":curPos,
                                "width":curWidth
                            });
                        }
                        else{
                            slider.animate({
                                "left":curPos,
                                "width":curWidth,
                            },1);
                        }
                    };
                    
                    target.mouseenter(function(){
                        var that = $(this);
                        var _width = that.outerWidth(true);
                        var posLeft = that.position().left;
                        slider.stop(true,true).animate({
                            "left" : posLeft,
                            "width" : _width
                        },"fast");
                    });
                    var navthis = this;
                    this.navArea.mouseleave(function(){
                        navthis.int();
                    });
                    
                    return this.int();
}

navSlider plugin

(function($){
    $.fn.navSlider = function(opts){
        var defaults = {
            speed:500,
            curElement:"",
            sliderElement:"",
            targetElement:""
        };
        
        var opts = $.extend(defaults,opts);

        return this.each(function(){
            var _this = $(this);
            if(opts.curElement == "" || opts.sliderElement == "" || opts.targetElement == "") {
                alert("Navslider has something wrong");
                return false;
            }
            
            var int = function(){
                var _left = _this.find(opts.curElement) ? _this.find(opts.curElement).position().left : 0;
                var _width = _this.find(opts.curElement) ? _this.find(opts.curElement).outerWidth() : 0;
                $(opts.sliderElement).animate({"left" : _left , "width" : _width},opts.speed);
            }
            _this.find(opts.targetElement).mouseenter(function(){
                var target_this = $(this);
                var target_left = target_this.position().left;
                var target_width = target_this.outerWidth();
                $(opts.sliderElement).stop(true,true).animate({"left" : target_left , "width" : target_width},opts.speed);
            });
            _this.mouseleave(function(){
                int();
            });
        return int();
        });
    };
})(jQuery);