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/

Answer 2

您是否嘗試過使用toggleClass ？ 您可以使用可選的[duration]參​​數來指定過渡要花費多長時間。

Answer 3

如果真的不是舊的或糟糕的瀏覽器不是問題，那么我會去CSS過渡，更輕松，更流暢。

小提琴

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類，那么您就很容易。