有时候做JQ动画，鼠标经过，它会不停自己抖动不停，解决方法（此处，是兼容IE ，当鼠标经过，遮罩层从下移到上边的JQ动画效果）

<style>
.x_sdbb {
    margin: 60px 0 40px 0;
}
    .x_title2{
        background: url(../images/hdb_img17.png) no-repeat;
        height: 50px;
        font-size: 30px;
        color: #049dff;
        padding-left: 70px;
        letter-spacing: 1px;
        padding-top: 3px;
        margin-bottom: 30px;
    }
    .x_sdbb .x_content{margin-left: 5px}
    .x_sdbb .x_content ul li{
        width: 293px;
        height: 394px;
        margin-right: 5px;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        padding:0;
    }
    .x_sdbb .x_content ul li .zz{
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        background: rgba(0,0,0,.5);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
        overflow: hidden;
        padding: 0px 10px 0 10px;
 
    }
    .x_sdbb .x_content ul li .zz h3{font-size: 20px;padding-top: 90px}
    .x_sdbb .x_content ul li .zz p{font-size: 18px;letter-spacing: 1px;line-height: 32px}
    .x_sdbb a.btn{
        width: 128px;
        height: 34px;
        border: 1px solid #049dff;
        color: #049dff;
        font-size:16px;
        border-radius: 0;
        line-height: 22.5px;
        margin-top: 30px;
        font-family: '微软雅黑'
    }
    .x_sdbb a.btn:hover{
        background: #049dff;
        color: #fff;
    }
</style>
 
<div class="x_sdbb">
    <div class="container">
        <div align="left" class="x_title2">4大版本，满足不同单位使用需求</div>
        <div class="x_content">
            <ul class="list-inline">
                <li>
                    <img src="static/images/hdb_img01.png" alt="">
                    <div class="zz" style="top: 394px;">
                        <h3 class="tc pb30">青少年版（A包）</h3>
                        <p class="tl">适合青少年群体，活动难度较小，活动设置符合青少年的身心发展状态，如青少年异性交往等，适用于各地中小学、中职院校等。</p>
                    </div>
                </li>
                <li>
                    <img src="static/images/hdb_img04.png" alt="">
                    <div class="zz" style="top: 394px;">
                        <h3 class="tc pb30">成年版（B包）</h3>
                        <p class="tl">适合成年群体，活动难度较大，部分活动设置符合成年人的身心状态，如压力管理、职业规划等，适用于大学、企事业单位等。</p>
                    </div>
                </li>
                <li>
                    <img src="static/images/hdb_img03.png" alt="">
                    <div class="zz" style="top: 394px;">
                        <h3 class="tc pb30">通用版（C包）</h3>
                        <p class="tl">适合各年龄阶段，活动难度适中，包含情绪管理、认识自我等主题，适合于学校、事业单位、社区、心理咨询中心等各机构。</p>
                    </div>
                </li>
                <li class="nomargin_right">
                    <img src="static/images/hdb_img02.png" alt="">
                    <div class="zz" style="top: 394px;">
                        <h3 class="tc pb30">通用版（D包）</h3>
                        <p class="tl">适合各年龄阶段，活动难度适中，包含情绪管理、认识自我等主题，适合于学校、事业单位、社区、心理咨询中心等各机构。</p>
                    </div>
                </li>
            </ul>
            <div align="center"><a class="btn" href="#" target="_blank">了解更多</a></div>
        </div>
    </div>
</div>
<script>
$('.x_sdbb .x_content ul li .zz').css('top','394');
$(".x_sdbb .x_content ul li").mouseenter(
        function(){
            $(this).find(".zz").stop(false,true).animate({top:0},400)
        }
)
$(".x_sdbb .x_content ul li").mouseleave(
        function(){
            $(this).find(".zz").stop(false,true).animate({top:394},400)
        }
)
</script>

其中，.stop(false,true)，就是阻止鼠标经过图片时，出现不停动画的方法