正文
鼠标悬浮弹出标题制作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) 因为事件的执行有一定延迟，当快速进行把鼠标在图片上悬浮和取消悬浮的操作时，一旦停止下来，事件却没有执行完毕。加后明显改善效果。
