鼠标悬浮弹出标题制作JQuery-优快云博客

本文介绍了一种网页设计技巧，当鼠标悬停在图片上时，使用jQuery实现标题从底部弹出的效果。通过在slideDown和slideUp前添加stop(true,true)，解决了事件执行延迟的问题。

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

效果图如下：

鼠标悬浮前：

鼠标悬浮后：

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

转载于:https://www.cnblogs.com/shanmao/p/3459833.html