javascript - jquery 点击图像放大和缩小

Question

我有一个图像，其行为必须如下:当用户第一次单击它时，图像应该放大，当再次单击图像时，它应该缩小。

请帮助弄清楚如何通过使用 jquery 单击图像来执行这两个操作？下面是我编写的用于放大图像的代码。

$('.tab1').click(function()
       {
           $(".GraphHolder").hide("slow");
           $("#top-button-container").hide("slow");
           $(".print").append('<button type="button">PRINT</button>');
          $(this).animate({width: "70%"}, 'slow');
       });

Answer 1

HTML:

<img id="pic" src="https://www.google.com//images/icons/product/chrome-48.png">

Jquery:

$(function(){
    $('#pic').toggle(
          function() { $(this).animate({width: "100%"}, 500)},
           function() { $(this).animate({width: "50px"}, 500); }
    );
});  

示例:http://jsfiddle.net/K9ASw/32/