请问如何用jquery通过animate()实现图片高度不变，仅宽度变化？

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
         
 
    </head>
     
    <body>
 
         
        <div><img src="images/Koala.jpg" alt="考拉" width="100" height="100" /></div>
    </body>
</html>
 
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
    $('div').toggle(
        function() {
            $('img').animate({width: '+=50px'}, 'slow');
        },
        function() {
            $('img').animate({width: '-=50px'}, 'slow');
        }
    );
     
});
</script>

解决方案 »

  1.   

    你设置下图片的高度就行了
    <div><img src="images/Koala.jpg" alt="考拉" width="100" height="100" /></div>
      

  2.   


    对喔。不过这不会有一点点不对的吗？那个高度……因为就算怎么量都很难量得准确<!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>

    <body>
    <div><img src="images/Koala.jpg" alt="考拉" width="100" /></div>
    </body>
    </html><script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    $('img').each(function (){
    $(this).height($(this).height());
    });
    $('div').toggle(
    function() {
    $('img').animate({width: '+=50px'}, 'slow');
    },
    function() {
    $('img').animate({width: '-=50px'}, 'slow');
    }
    );
    };
    </script>