Jquery - Reverse animation on click (toggle or if/else)

Question

I've tried a lot of different options and I'm sure most would work if I knew what I was doing .

I want to click on an image and make it larger and centered in the screen, then I want to click on the same image and return it back to normal.

In the two individual scripts below I have erased the reverse effect but I basically used functions that changed the css settings back to width:250, height:250, and marginLeft:9%. All I could get it to do successfully was enlarge an image but then it shrank automatically once it had fully enlarged. I need to make the function enlarge and then wait until I click the image again for it to shrink.

<script>

            $('document').ready(function(){
                $('.hello_mom').on('click', function(){
                    $('.lbs_lease').animate({
                        width:"350px",
                        height:"350px",
                        zIndex:"10",
                        marginLeft:"28.4%"
                    }, 500 );
                });
            });

    </script>

    <!--<script>//My idea with this second script was to set an initial variable that I would use to make the enlargement animation run (with an if statement) and the shrinking animation stop until the variable was changed at the end of the function. Once the variable changes the else statement would become true and run my reverse animation. However, it seems redundant when the animation still doesn't wait for another click to occur before it runs.

        $a = 5;
        $c = 10;
        var b = $a;

        if(b < $c) {
            $('.lbs_lease').animate({
                width:"350px",
                height:"350px",
                zIndex:"10",
                marginLeft:"28.4%"
            }, 500 )};

    </script>-->

Answer 1

you have 2 ways to do that ..

1- by using addClass and removeClass with transition

in css

.imageClicked{
   width:350px;
   height:350px;
   zIndex:10;
   marginLeft:28.4%;
   transition : 0.5;
}

js

$('document').ready(function(){
     $('.hello_mom').on('click', function(){
         if($('.lbs_lease').hasClass('imageClicked')){
             $('.lbs_lease').removeClass('imageClicked');  
         }else{
             $('.lbs_lease').addClass('imageClicked');  
         }
     });
});

2- by make another animate with default style and use boolean true or false

$('document').ready(function(){
    var imgClicked = true;
    $('.hello_mom').on('click', function(){
      if(imgClicked == true){ 
         $('.lbs_lease').animate({
                        width:"350px",
                        height:"350px",
                        zIndex:"10",
                        marginLeft:"28.4%"
         }, 500 );
         imgClicked = false;
       }else{
         $('.lbs_lease').animate({
                        //type your default style here
         }, 500 );
         imgClicked = true;
        }
     });
 });

Answer 2

something like this:

var left = true;
$('.hello_mom').on('click', function () {
    if (left) {
        $(this).animate({
            'marginLeft': "-=30px"
        });
        left = false;
    } else {
        $(this).animate({
            'marginLeft': "+=30px"
        });
        left = true;
    }
});

http://jsfiddle.net/e1cy8nLm/

Answer 3

You can do something like this: JSFiddle Demo

$('img').on('click', function(){
    $(this).toggleClass( 'enlarge' );
});

CSS:

img {

    // set the initial height and width here so we can animate these properties.
    width:100px;
    height:100px;

  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;    
}

// toggle this class with jQuery to enlarge the img on click
.enlarge {
    width:200px;
    height:200px;
}

Answer 4

One of the methods will be using addClass and removeClass jquery functions keeping track of the current state of image. The enlarged variable has the current state of the image and toggles it onclick with addition or removal of class. Note the transition time is mentioned for both the classes, the added/removed as well as the original styling class to prevent abrupt transition while resizing to both states.

Here is a jsfiddle for that : JS FIDDLE DEMO

HTML Code :

<div>
    <img class="hello_mom" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>

CSS Code :

.hello_mom{
    width:250px;
    height:250px;
    background : red;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}
.hov_class{
    width:350px;
    height:350px;
    z-index:10;
    //margin-left:28.4%;
    -webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
}

JS Code :

var enlarged=0;
$('document').ready(function(){
    $('.hello_mom').on('click', function(){
        if(!enlarged){
            $('.hello_mom').addClass("hov_class");
            enlarged=1;
        }
        else{
            $('.hello_mom').removeClass("hov_class");
            enlarged=0;
        }

    });
});

Answer 5

Take a look at this http://julian.com/research/velocity/

Velocity is javascript animation, made faster than CSS animation. ...and here you also have a reverse method