jQuery: Horizontales scrollen in Selectboxen – Die coole Lösung

$.fn.selectBox = function(opt) {
	var sb = $(this); // selectBox
	var o = $.extend({
		'onSelect' : function(e) {
 
		},
		'animationSpeed'     : 5000,
		'animationSpeedBack' : 300
	},opt);	
 
	sb.children('li').each(function(){
		var e = $(this);
		// text breite bestimmen:
		var testWidth = document.createElement('span');
		$(testWidth).attr('id','testWidthID');
		$(testWidth).html(e.text());
		$('body').append(testWidth);
		e.data('textWidth',$('#testWidthID').width());
		$('#testWidthID').remove();
		e.click(function(){
			$(sb).children('li.selected').removeClass('selected');
			e.addClass('selected');
			o.onSelect($(this));
		});
 
		$(this).mouseover(function(){
			e = $(this);
			if (e.data('textWidth') > e.width()) {
				var newTextIndent = -(e.data('textWidth')-e.width());
				e.stop();
				e.animate({'textIndent':newTextIndent},o.animationSpeed,function(){
					e.animate({'textIndent':0},o.animationSpeedBack);					
				});
			}
		});
		$(this).mouseout(function(){
			$(this).stop();
			$(this).animate({'textIndent':0},o.animationSpeedBack);
		});
	});
}

            $(document).ready(function() { 
                    $('#selectbox').selectBox();
            });

            $(document).ready(function() { 
                    $('#selectbox').selectBox({
		    	'onSelect' : function(e) {
				alert(e.text());    
			}
		    });
            });