实用的jQuery导航下划线滑动菜单效果

使用方法：

载入CSS样式、jQuery库文件、特效JS文件

<link  rel="stylesheet" href="css/index.css" />
<script src="js/jquery.min.js">script>
<script src="js/index.js">script>

JS特效部分（index.js）

$(function() {
	var $t, leftX, newWidth;
	$('.menu ul').append('
');
	var $block = $('.block');
	$block.width($(".current").width()).css('left', $('.current a').position().left).data('rightLeft', $block.position().left).data('rightWidth', $block.width());
	$('.menu ul li').find('a').hover(function() {
		$t = $(this);
		leftX = $t.position().left;
		newWidth = $t.parent().width();
		$block.stop().animate({
			left: leftX,
			width: newWidth
		},300);
	}, function() {
		$block.stop().animate({
			left: $block.data('rightLeft'),
			width: $block.data('rightWidth')
		},300)
	})
})

效果很平滑、连贯，不错的jQuery效果