用jQuery写简单遮罩

css代码

<style type="text/css">
        body,div,img,p{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width:1200px;
            margin:30px auto;
            overflow: hidden;
        }
        .sbox{
            width:30%;
            margin:20px;
            float: left;
            position: relative;
        }
        .img{
            width:100%;
        }
        .shade{
            width:360px;
            height: 260px;
            position: absolute;
            top:0;
            left: 0;
            background-color: rgba(0,0,0,.5);
            display: none;
        }
    </style>

html代码

<div class="box">
            <div class="sbox"><p class="shade"></p><img src="img/1.jpg" alt="" /></div>
            <div class="sbox"><p class="shade"></p><img src="img/2.jpg" alt="" /></div>
            <div class="sbox"><p class="shade"></p><img src="img/3.jpg" alt="" /></div>
        </div>

javascript代码

$(function(){
            $(".sbox").mouseover(function(){
                if($(this).children(".shade").is(":animated")){
                    return;
                }else{
                    $(this).children(".shade").slideDown(1000);
                }
            }).mouseout(function(){
                $(this).children(".shade").slideUp(1000);
            
            });
        })
    </script>