jQuery animation problem - onclick - how to go back to the initial properties?

Hello,

I’ve tried to add the animation (onclick) with jQuery.

$(document).ready(function(){
    var options = {
        duration: 800,
        easing: 'linear'
    };
    $("#fotoPortfolio1").click(function(){
        $(this).closest("div").animate({
            height: '+=50px',
            width: '+=50px',
        }, options);
    });
});

It works partly. I mean if I click the “zoom” kind of animation works. But:

  1. How to make it as the initial form again, with next click.
  2. How to make it to be on the top (it covers other images so far after click).

Maybe there is any other (not too hard way) to create a “zoom” function to create a preview of an image.

Thanks!

I would use scale CSS function instead:
See reference https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

For the toggle (in-out zoom) put some logic in your code.