有时候做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)，就是阻止鼠标经过图片时，出现不停动画的方法