Animate and image up and down in jQuery

Question

I'm trying to animate and image up and then down with jQuery.

It should behave like this:

When the page loads it shows 50% of the image. If someone clicks on the image it then animates the div up the page. If the user click again it moves back down the page.

html

 <div id="slidebottom" class="slide">
     <div class="inner"><img src="images/sze.jpg" alt="" class="try" /></div>
 </div>

jQuery

$(document).ready(function() {
    $('.try').click(function() {
        $(".inner").animate({
            top: '-=100px'
        }, 2000);
    });
});

How can I reverse the animation after click two? At the moment every time I click, the container moves up.

Solution 1

You can try using the .toggle() method, which takes two functions and alternates between executing each one of them on click:

$(document).ready(function(){
  $('.try').toggle(function() {
    $(".inner").animate({top: '-=100px'}, 2000);
  }, function() {
    $(".inner").animate({top: '+=100px'}, 2000);
  });
});

However, I personally would use a class and CSS3 Transitions.

Solution 2

Try this example. Also note that in order to use the top css property you should either position: relatve; or position: absolute the .inner div.

 var clicked = false
 $('.try').click(function () {
     if (clicked == true) {
         $(".inner").animate({
             top: '0px'
         }, 2000);
         clicked = false;
     } else {
         $(".inner").animate({
             top: '-100px'
         }, 2000);
         clicked = true;
     }
 });​

Comments

[holian]

It is possible to not work in Chrome the animate? FF work this, but in Chrome after click the image first the image jump down, and animate up, if i click again than animate the hole site..crazy effect

[holian]

i tried in Chrome , IE9, Safari...only FF handle it as ascpected.

[cptstarling]

90% of the examples wouldn't for me, but this one does…