jquery zoom in and zoom out on clicking an image

Question

I have an image which has to behave the following way: When a user clicks on it the first time it the image should zoom-in and when clicked on the image again it should zoom-out.

Please help in figuring out how the two actions be performed by clicking on the image using jquery? Below is the code I have written for zooming in the image.

$('.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); }
    );
});  

Example at: http://jsfiddle.net/K9ASw/32/

Answer 2

Have you tried using toggleClass ? You can use the optional [duration] parameter to specify how long you want the transition to take.

Answer 3

If really old or crappy browsers are'nt an issue, I'd go for CSS transitions, easier and smoother.

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');
     }
 });
});

I removed all the code not pertaining to the image resize. Also, if you're dealing with an image, you have to target the image tag, not the outer div. If the image is applied to the .tab1 class as a background image then you're sol.