看到有的flash网站的图标，鼠标一放上去图标就缓缓变了，移开又会缓缓变回来，很是漂亮。我打算用jquery也做做看，能不能做出类似的效果。因为自己练手，就随便拉两张图片：
复制代码 代码如下:
<div id="div">
<img id="1" src="florian.jpg" style= "position:absolute;z-index:2;left:10px;top:10px;"/>
<img id="2" src="kamil.jpg" style= "position:absolute;z-index:1;left:10px;top:10px;"/>
</div>
这样第一张就会覆盖第二张图片，那我只要淡入淡出第一张图片就能实现特效了。于是就使用了hover,fadein和fadeout，简单的实现了
复制代码 代码如下:
$(document).ready(function () {
$("div").hover(
function () { $("#1").fadeout(1000); },
function () { $("#1").fadein(1000); }
);
});
但这样问题出来了，如果我在图片上不停地快速的移入移出鼠标。那么动画都进入列队了，那么动画就会一直在动，很是不好看。
于是我打算使用：dequeue（），定义：removes a queued function from the front of the queue and executes it.
我想如果不停的移入移出，那么就会删除上一个操作在列队中的动画。这样就会执行最后的动画了。
复制代码 代码如下:
function () { $("#1").dequeue().fadeout(1000); },
function () { $("#1").dequeue().fadein(1000); }
可是更麻烦的情况出现了，当不停地移入移出鼠标时，有时图片都没了，有时不变了。怎么回事？
然后又想到使用:stop(),定义：
stops教程 all the currently running animations on all the specified elements.
if any animations are queued to run, then they will begin immediately.
复制代码 代码如下:
function () { $("#1").stop().fadeout(1000); },
function () { $("#1").stop().fadein(1000); }
我停止前面所有的列队，总算可以了吧！但是却出现了图片淡到一半，不动了！就像两个图片叠加显示了一样。
又是怎么回事？
直到我在stop中加参数，图片才能正常显示。
clearqueue (可选)boolean
如果设置成true，则清空队列。可以立即结束动画。
gotoend (可选)boolean
让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
复制代码 代码如下:
function () { $("#1").stop(true,true).fadeout(1000); },
function () { $("#1").stop(true, true).fadein(1000); }
但这样就会出现执行完毕，突然显示整图的情况，就没有了淡入淡出的那样的效果了。
没办法，只有使用animate了。
复制代码 代码如下:
function () { $("#1").stop().animate({ 'opacity': 0 }, 1000); },
function () { $("#1").stop().animate({'opacity':1}, 1000); }
或：
function () { $("#1").animate({ 'opacity': 0 }, { queue: false, duration: 1000 }); },
function () { $("#1").animate({ 'opacity': 1 }, { queue: false, duration: 1000 }); }
看一款淡入淡出实例
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>jquery淡入淡出、展开收缩菜单</title>
<style type="text/css教程">
ul li{list-style:none;}
ul li.menu{position:relative;width:120px;}
ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;}
ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style>
<script language="网页特效" src="/jquery/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".menu").hover(
function(){
//$(".content").fadein(800); // 淡入
$(".content").slidedown(800); // 展开
},function(){
//$(".content").fadeout(1000) // 淡出
$(".content").slideup(1000) // 收缩
});
})
</script>
</head>
<body>
<ul>
<li class="menu">
<a>弹出菜单</a>
<ul class="content">
<li><a href="#">菜单内容1</a></li>
<li><a href="#">菜单内容2</a></li>
<li><a href="#">菜单内容3</a></li>
<li><a href="#">菜单内容4</a></li>
<li><a href="#">菜单内容5</a></li>
</ul>
</li>
</ul>
</body>
</html>