jquery怎么实现鼠标放入图片，图片滚动消失，另外一张图片滚动显示

<div class="company_l">
  <img src="img/company1.jpg" class="company_pic "/>
  <img src="img/01.png" class="company_pic" style="display:none;"/>
  </div>
怎么写js使鼠标移入，第一张图片向上滚动消失，第二章滚动显示，鼠标移开，第一张图片向下滚动显示，第二张滚动消失javascriptjquery

解决方案 »

  1.   


    <!DOCTYPE >
    <HTML>
        <head>
            <meta charset="utf-8" />
            <style type="text/css">
                .company_l div,
                .company_l{
                    height:317px;
                    width:212px;
                }
                .company_l{
                    overflow:hidden;
                    border:1px solid #ccc;
                }
                .yellow{
                    background-color:yellow;
                }
                .red{
                    background-color:red;
                }
            </style>
        </head>
        <BODY>
            <div class="company_l">
                <div class="yellow"></div>
                <div class="red"></div>
            </div>
            <script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
            <script type="text/javascript">
                $(function(){
                    var imgHeight = 317;
                    $('.company_l').on('mouseenter', function(){
                        $(this).animate({scrollTop:imgHeight}, 'slow');
                    }).on('mouseleave', function(){
                        $(this).animate({scrollTop:0}, 'slow');
                    });
                }(jQuery));
            </script>
        </BODY>
    </HTML>