//聊天框动画效果
$(function(){
	$(".chatContainer").mouseenter(function(){//鼠标移在div上面时，执行事件
        //有别的事件执行时终止动画
		$(".chatBtn").stop(true);
		$(".chat-message-num").stop(true);
		$(".chatBox").stop(true);
        //将这三个div的style的right属性调为各个值，并且执行完动画后执行方法。300是0.3秒的时间移出来
		$(".chatBtn").animate({right: "350px"}, 300, function() {});
		$(".chat-message-num").animate({right: "335px"}, 300, function() {});
		$(".chatBox").animate({right: "-20px"}, 300, function() {});
	});
	$(".chatContainer").mouseleave(function(){//鼠标从div上面移开时，执行事件
        //有别的事件执行时终止动画
		$(".chatBtn").stop(true);
		$(".chat-message-num").stop(true);
		$(".chatBox").stop(true);
        //将这三个div的style的right属性调为各个值，并且执行完动画后执行方法。300是0.3秒的时间移出来
		$(".chatBtn").animate({right: "-20px"}, 300, function() {});
		$(".chat-message-num").animate({right: "-35px"}, 300, function() {});
		$(".chatBox").animate({right: "-390px"}, 300, function() {});
	}); 
})

这样的效果是鼠标移到div上面时，执行第一个动画。当第一个动画没有执行完时，鼠标移开div上面时，第一个动画停止，执行第二个动画。