【特效】移入显示移出隐藏

移入显示移出隐藏的效果也是很常见的，例如：

 

 

如果页面有有多处地方有此效果，那么也可以合并到一块，只写一段js代码，只要注意控制样式和class名字和用于js获取元素的class名字分开设置就可以了。代码很简单，用到了setTimeout()和clearTimeout()这两个方法。如果说隐藏的内容和切换的标签之间没有距离，那么只写两个hover()就可以了，如果有间距，那么就需要用到上面两个时间延迟的方法了。

说多无用，具体看代码吧：

 

html：

<div class="jsMove box">

         <input type="button" value="移入/移出1" class="jsMove_t">

    <div class="jsMove_con">内容1</div>

</div>

 

<div class="jsMove box">

         <input type="button" value="移入/移出2" class="jsMove_t">

    <div class="jsMove_con">内容2</div>

</div>      

 

css：

.jsMove_con{ display:none;}/*隐藏的内容*/

 

.box{ border:1px solid #096; margin:40px auto 0; padding:20px; width:500px;}

.jsMove_con{ width:500px; height:200px; background:#3C9; margin-top:20px;}

 

js：

$(document).ready(function(){

         var move=$(".jsMove_t");      

         var timer=null;         

         move.each(function(){

                   var move_c2=$(this).next(".jsMove_con");            

                   $(this).mouseover(function(){

                            move_c2.show();

                            clearTimeout(timer);

                            });                       

                   $(this).mouseout(function(){

                            timer=setTimeout(function(){move_c2.hide()},200);                        

                            });                       

                   move_c2.mouseover(function(){

                            clearTimeout(timer);

                            });

                   move_c2.mouseout(function(){

                            timer=setTimeout(function(){move_c2.hide()},200);               

                            });              

                  

                   });              

});

 

预览效果：http://www.gbtags.com/gb/rtreplayerpreview-standalone/2841.htm

源码下载：http://pan.baidu.com/s/1eRH3O9G