jquery显示隐藏特效

81497307 2018-01-27

移入显示移出隐藏

如果说隐藏的内容和切换的标签之间没有距离,那么只写两个hover()就可以了,如果有间距,那么就需要用到setTimeout()和clearTimeout()这两个方法两个时间延迟的方法了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移入移出</title>
    <style type="text/css">
        /*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;}

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<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>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    /*Javascript代码片段*/
    $(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);
            });

        });
    });
</script>
</body>
</html>

.

相关推荐

Web全栈笔记 / 0评论 2020-06-15