jQuery slide back when clicked anywhere on the page

Question

$(".links").click(function(){ 
    $('.slider').stop(true,false).animate({ right:  "0" }, 800, 'easeOutQuint'); 
}, function() { 
    $(".slider").stop(true,false).animate({ right: "-200" }, 800, 'easeInQuint'); 
}, 1000);

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.

http://jsfiddle.net/aofg5v78/

Your syntax is all over the place here. `click` only takes 1 function as a parameter and you have `1000` also being passed, which I assume you want to be the time the animation should take, but that is what the `800` is. — Rory McCrossan, Dec 17 '14 at 08:16
http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — Salman A, Dec 17 '14 at 09:28

rsp · Accepted Answer · 2014-12-17T09:22:59.707

Putting your code through the JavaScript beautifier (it's always good to do it to your code that you post to make it easier to understand) gives this:

$(function () {
  $(".links")
    .click(function () {
        $('.slider')
          .stop(true, false)
          .animate({
            right: "0"
          }, 800, 'easeOutQuint');
      },
      function () {
        $(".slider")
          .stop(true, false)
          .animate({
            right: "-200"
          }, 800, 'easeInQuint');
      }, 1000);
});

You're trying to pass two handlers to .click() and something that looks like a timeout or duration (1000). Try something like this:

$(function () {
  var toggle;
  $(".links")
    .click(function () {
        toggle = !toggle;
        if (toggle) {
          $('.slider')
            .stop(true, false)
            .animate({
              right: "0"
            }, 800, 'easeOutQuint');
        }
        else {
          $(".slider")
            .stop(true, false)
            .animate({
              right: "-200"
            }, 800, 'easeInQuint');
        }
    });  

});

Update: To make it slide when you click anywhere on the page it's slightly more complicated:

$(function () {
  var toggle;
  $(document).click(function () {
    if (toggle) {
          toggle = !toggle;
          $(".slider")
            .stop(true, false)
            .animate({
              right: "-200"
            }, 800, 'easeInQuint');
    }
  });
  $(".links")
    .click(function (e) {
        e.stopPropagation();
        toggle = !toggle;
        if (toggle) {
          $('.slider')
            .stop(true, false)
            .animate({
              right: "0"
            }, 800, 'easeOutQuint');
        }
        else {
          $(".slider")
            .stop(true, false)
            .animate({
              right: "-200"
            }, 800, 'easeInQuint');
        }
    });  
  $(".slider")
    .click(function (e) {
      e.stopPropagation();
    });    
});

This part:

  $(".slider")
    .click(function (e) {
      e.stopPropagation();
    });

is there to not hide the slider when you click on the slider (and not somewhere else on the page, outside of the slider) but if that's not what you want then you can remove it.

(The code could be refactored to remove duplication and to avoid running the selectors multiple times but it serves the purpose of this example. Also, you can't have more than one such slider on a page right now because all will slide at the same time but I guess that's ok.)

See DEMO.

It would be simpler for older jQuery versions with the toggle method but unfortunately it was deprecated in version 1.8 and removed in version 1.9.

(By the way, the easing functions that you are using are not available in plain jQuery by default. They are available if you're using jQuery UI but if you're not then you have to add them before you can use them. Just something to keep in mind to avoid the unhelpful "undefined is not a function" exception.)

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Heres a different take:

DEMO

such div

css

.slider {
  position: absolute;
  top: 200px;
  height: 200px;
  width: 200px;
  background: #000;
  
  /* relevant */
  transform: translateX(-200px);
  transition: transform 400ms ease-in-out;   
}
.slider.shown {
    transform: translateX(0);
}

jquery js

$(document).ready(function(){
   var $slider = $('.slider').addClass('shown');
   $(document).on('click', '*:not(.slider)', function(e) {
       //// as described in question in on load, out on click
       // $slider.removeClass('shown');
       
       // to slide in/out on click:
       $slider.toggleClass('shown');
   })
   
   // seperate button, dedicated to fn
   $('.toggleSlider').on('click', function() {
       $slider.toggleClass('shown');
   });
});

demo HTML

<body>
  <div class='slider'>such div</div>
  <button class='toggleSlider'>such div</button>
</body>

Perfect, but how can I slide it out to position `right:0` after clicking on the div? — Frostbourn, Dec 17 '14 at 08:56

Girish · Answer 3 · 2014-12-17T09:22:48.133

You can do it from two event attachment... and check closest() element have .spider or not and make toggle from animation() function, see below code

$(function() {
  $(".slider").click(function() {
    $('.slider').stop(true, false).animate({
      right: "0"
    }, 800, 'easeOutQuint');
  });

  $(document).on('click', function(e) {
    if (!$(e.target).closest('.slider').length) {
      $(".slider").stop(true, false).animate({
        right: "-370"
      }, 800, 'easeInQuint');
    }
  });

});

.slider {
  position: fixed;
  right: -370px;
  top: 120px;
  z-index: 99997;
  width: 400px;
  height: 300px;
  background: red;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider"></div>

jQuery slide back when clicked anywhere on the page

3 Answers3

DEMO