JQ应用第5款：jQuery鼠标移到色块儿上去色块儿消失

一：描述

本身这一功能是一开始想的是非常简单的，但是在使用过程中，好几次想法都搞错了，以致于将近花了一天的时间去折腾它。

错误想法一：以为是图片向上滚动，其实是色块儿向上滑动以致于消失；

错误想法二：以为有绝对定位，固定图片位置。其实没有，想好结构，外层为图片，内部有黑色块。即中间没有任何用过绝对定位的功能。

二：使用教程

1、HTML代码

<div class="pic" style="background: url(tubebg.png);"><!--鼠标移上去的图片-->
	<div class="tube"></div><!--黑色试管-->
</div>

我们这里分为两个容器，一个是 图片pic ，一个是 试管tube。

实现方法：背景为图片，表面是一个黑色块儿。当鼠标移上去的时候，黑色块儿隐藏不显示了。当鼠标离开的时候，又显示了。

之前的错误想法是：以为是图片在动，色块不动。其实是错误的，是图片不动。色块儿在动。

另外，运用背景行内式css，即 background:url(tubebg)，是为方便调用模板标签时而使用的。

2、CSS代码

/*图片*/
.pic{
	width: 120px;
	height: 540px;
	overflow: hidden;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius:60px;
}
/*黑色块试管*/
.tube{
	width: 120px;
	height: 540px;
	background: #000000;
}

3、JS代码

$(function() {
	//鼠标移到黑色块儿时，黑色块儿上滑隐藏，即显示出图片
	$(".tube").hover(function(){
		$(this).slideUp();
	});
	//鼠标移出去黑色块儿时，黑色块儿下滑显示
	$(".pic").mouseleave(function(){
		$(".tube").slideDown();
	})
});