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/

Answer 2

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

Answer 3

如果真的老旧或糟糕的浏览器不是问题，我会选择CSS过渡，更容易，更顺畅。

FIDDLE

Answer 4

   **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">

Answer 5

$(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。

jquery放大并缩小单击图像

5 个答案: