Javascript jquery在单击图像时放大和缩小

我有一个形象，其行为方式如下： 当用户第一次单击图像时，图像应放大，再次单击图像时，图像应缩小

请通过使用jquery单击图像来帮助了解如何执行这两个操作？下面是我为放大图像而编写的代码

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

$（'.tab1'）。单击（函数（）
{
$（“.GraphHolder”）.hide（“慢”）；
$（“#顶部按钮容器”）.hide（“slow”）；
$（“.print”）.append（'print'）；
动画（{width:“70%”，}，'slow'）；
});

您是否尝试过使用？您可以使用可选的[duration]参数来指定转换所需的时间

$(function () {
 $('.tab1').on('click', function()
   {
     if($(this).hasClass('zoomed')) {
       $(this).removeClass('zoomed')
       $(this).children('img').animate({width: "10%"}, 'slow');
     }
       $(this).addClass('zoomed')
       $(this).children('img').animate({width: "70%"}, 'slow');
     }
 });
});

我删除了所有与图像大小调整无关的代码。 此外，如果处理图像，则必须以图像标记为目标，而不是外部div。

---

如果该图像作为背景图像应用于.tab1类，那么您就是sol。

如果真正的旧浏览器或糟糕的浏览器不是问题，我会选择CSS转换，更简单、更流畅

HTML：

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

示例位于：

**以下是脚本**
$（文档）.ready（函数（）{
$（'#Img1，#Img2，#Img3'）.mouseover（函数（）{
制作动画（{宽度：“122px”，高度：“110px”}，100）；
});
$（'#Img1，#Img2，#Img3'）。鼠标输出（函数（）{
动画（{宽度：“118px”，高度：“106px”}，100）；
});
});
**Aspx代码**

我还没有尝试切换类。这里的要求是，放大和缩小功能只能在用户单击时进行。toggleClass将为您执行此操作。如果将{width:“70%”移动到一个“zoom”类中，然后在click（）回调中调用$（“#”）toggleClass（“zoom”），它将在交替单击时进行放大和缩小。@Rune谢谢。。。我一直忘了。。。我只是一直按习惯键入live。@user1403848请确保您拥有最新的jQuery

版本，该版本是1.7版+
$(function(){
    $('#pic').toggle(
          function() { $(this).animate({width: "100%"}, 500)},
           function() { $(this).animate({width: "50px"}, 500); }
    );
});  

   **here is the script**
   <script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function () {
        $('#Img1, #Img2, #Img3').mouseover(function () {
            $(this).animate({ width: "122px", height: "110px" }, 100);
        });
        $('#Img1, #Img2, #Img3').mouseout(function () {
            $(this).animate({ width: "118px", height: "106px" }, 100);
        });
    });
  </script>

 **Aspx code**
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">