鼠标悬浮弹出标题制作JQuery

今天给客户制作的网站里面加个效果，当鼠标在列表图片之外时，标题不显示，当鼠标悬浮在图片之上时，标题从底部弹出。

效果图如下：

鼠标悬浮前：

鼠标悬浮后：

html代码如下：

<ul class="e3">

	<li>

        <a href="#">

            <img src="./1_131031084533_1.jpg" border="0" width="824" height="94" alt="长城外景基地">

            <span class="title" style="display: none; ">

                <font class="font1">SHOWCASE TIME<br>长城外景基地</font>

            </span>

        </a>

    </li>

	<li>

    	<a href="#">

        	<img src="./1_131031084327_1.jpg" border="0" width="824" height="94" alt="白鹭岛">

            <span class="title" style="display: none; ">

            	<font class="font1">SHOWCASE TIME<br>白鹭岛</font>

            </span>

       	</a>

    </li>

</ul>

　　

jquery代码如下：

<script type="text/javascript">

$(document).ready(function(){

  $('.e3 li').mouseover(function(){

  $(this).find('.title').stop(true,true).slideDown();//you can give it a speed

  });

  $('.e3 li').mouseleave(function(){

  $(this).find('.title').stop(true,true).slideUp();

  });

});

</script>

里面在slideDown和slideUp前面加 stop(true,true) 因为事件的执行有一定延迟，当快速进行把鼠标在图片上悬浮和取消悬浮的操作时，一旦停止下来，事件却没有执行完毕。加后明显改善效果。