jq鼠标滑入滑出代码小记

$(function(){
	var isIn=false;
	$(".first-avatar img").each(function(i){	
		$(".first-avatar:eq("+i+")").find("img").mouseenter(function(){
			var that=$(this);
			$(".first-avatar-info:eq("+i+")").fadeIn().off("mouseenter").on("mouseenter",function(){
				that.fadeTo(500,0.8).removeClass("blur");
				isIn=true;
			}).off("mouseleave").on("mouseleave",function(){
				$(this).hide();
				that.fadeTo(500,0.3).addClass("blur");
				isIn=false;
			});	
		});
		$(".first-avatar:eq("+i+")").find("img").mouseleave(function(){
			setTimeout(function(){
				if(!isIn){
					$(".first-avatar-info:eq("+i+")").stop().hide();
					$(this).fadeTo(500,0.3).addClass("blur");
					isIn=false;
				}
			},100);
			});
		});
	});

这个代码还是不错的。只是CSS的定位写得有点乱，以后需要用的时候再改。

.user-wrap-list .first-avatar{width: 100px;height:100px;position: relative;display: block;float: left;margin:1px 0 0 1px;}
.user-wrap-list .first-avatar-info{position: absolute;top: -2px;left: -2px;width: 260px;height: 100px;border:2px solid #279BD6;z-index: 559;display: none;}
.user-wrap-list .first-avatar-info .first-avatar-name{margin-left:100px;padding:3px 10px;background: #279BD6;position: relative;display: block;height: 94px;color: #fff;overflow: hidden;line-height: 18px;}
.user-wrap-list .first-avatar-info .first-avatar-name strong{display: block;padding-bottom: 5px;}
.user-wrap-list .first-avatar img{width: 100px;height: 100px;}