jQuery animate back when clicked anywhere on the page

Question

    <script type="text/javascript">
        $(function (){
            $(".links").click(function(){ 
            $('.slider').stop(true,false).animate({right:  "0" }, 800, 'easeOutQuint' ); },
        function(){ 
            $(".slider").stop(true,false).animate({right: "-200" }, 800, 'easeInQuint' ); },1000);
        });

   </script>

I am building a little slider on my website. The slider position is right: -200. It slides to position right:0 I want to animate it back to position right: -200 after clicking anywhere else on the page.

I tried all the ways which failed. toggle(slide) works good but doesn't looks good.

This could help you: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Iago, Dec 16 '14 at 23:28
Thank you. I tried it but I want to animate slider back, not hide it. — Frostbourn, Dec 17 '14 at 00:03

score 0 · Answer 1 · answered Dec 16 '14 at 23:28

0

Bind click on all document, stop current animation, run new animation.
$(document).click(function () { $('.slider').stop(true).animate({right: -200}, 500); });

answered Dec 16 '14 at 23:28

sergolius

428
3
8

score 0 · Accepted Answer · answered Dec 16 '14 at 23:28

0

well, here you go

$(document).click(function(e){
   e.preventDefault();

   if($(e.target).closest("your_slider_selector").length) return;

   //here you can do what you want
});

answered Dec 16 '14 at 23:28

Smile0ff

788
7
18

Dennis98 · Answer 3 · 2015-02-17T01:09:39.470

0

Store the CSS value in a variable before you animate the slider:

var right = $('.slider').css("right");

And then you can just use the variable:

$('.slider').stop(true).animate({right: right}, 800);

Here an example: http://jsfiddle.net/ctdjkrLx/2/

edited Feb 17 '15 at 01:09

answered Dec 16 '14 at 23:30

Dennis98

139
1
12

jQuery animate back when clicked anywhere on the page

3 Answers3