animate and image up and down

Jquery - animate and image up and down

up vote1down votefavorite

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); }); }); I need help, how to reverse the animation after click two. (At the moment every time I click, the container moves up) Thank you masters javascript jquery animation jquery-animate shareimprove this question edited Jul 18 '12 at 8:42 Vince Pettit 1,00221856 asked Jul 18 '12 at 8:23 holian 1633519

add a comment

2 Answers

activeoldestvotes

up vote1down voteaccepted

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. shareimprove this answer answered Jul 18 '12 at 8:31 Inkbug 1,000418

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 Jul 18 '12 at 8:57 i tried in Chrome , IE9, Safari...only FF handle it as ascpected. –  holian Jul 18 '12 at 9:01 i think i do it with css –  holian Jul 18 '12 at 9:02

http://stackoverflow.com/questions/18349108/animating-a-div-up-and-down-repeatedly

---

$(".show_up").click(function() {

$(this).siblings("ul").animate({

top: "-=100%"}, 500);

});

$(".show_down").click(function() {

$(this).siblings("ul").animate({

top: "+=100%"}, 500);

});