After pressing the show I need something, I could click on the .wrapper container (that is, outside the block districts) and the disappearing effect occurred, as with the second click on show, who knows how to do this?

ATTENTION ! you need this trigger to be able to click after the first click on show. That is, in a hidden state, when you .wrapper on .wrapper nothing appears.

Example: http://jsfiddle.net/ad8zr/37/

 $(document).ready(function() { $('#triggermap').click(function() { var map = $(".schememap"); map.stop(); if(map.is(':visible')) { map.animate({ right:493, opacity: 0 }, 1200, function() { $(this).hide().css('right', 0); }); } else { map.show().animate({ right:193, opacity: 1 }, 1200);} }); }); 
 .schememap { display: none; height: 234px; margin-top: 50px; opacity: 0; position: absolute; background: blue; right: 0; width: 500px; } #triggermap { border-bottom: 1px dashed; font-size: 20px; color: #0C5394; float: left; } .wrapper { width: 100%; height: 100%; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='wrapper'> <p id='triggermap'>show</p> <div class="schememap" ></div> </div>

  • The squares of the square are 5. Your click is hanging on #triggermap , well, hang it on the elements you need. for example on '.wrapper,.wrapper *' . - Yura Ivanov
  • 2
    here you have the circle "grammar of the Nazi go on!" ? in fact, sometimes it seems that questions are asked by foreign intelligence officers with some goals of their own. - zb '
  • Thanks for the answer ! I will study your code. Just do not know how to put you the correct answer. - sasha1

3 answers 3

http://jsfiddle.net/oceog/ad8zr/38/

 $(function () { var map = $(".schememap"); var $triggermap=$('#triggermap'); var triggermap=$triggermap.get(0); function hide() { map.stop().animate({ right: 493, opacity: 0 }, 1200, function () { $(this).hide().css('right', 0); }); } $('.wrapper').click(function (e){ console.log(e.target,triggermap); if (e.target === triggermap || e.target === map.get(0)) return; if (map.is(':visible')) { map.finish(); hide(); } }); $triggermap.click(function () { map.finish(); if (map.is(':visible')) { hide(); } else { map.show().animate({ right: 193, opacity: 1 }, 1200); } }); }); 
 .schememap { display: none; height: 234px; margin-top: 50px; opacity: 0; position: absolute; background: blue; right: 0; width: 500px; } #triggermap { border-bottom: 1px dashed; font-size: 20px; color: #0C5394; float: left; } .wrapper { width: 100%; height: 100%; position: absolute; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='wrapper'> <p id='triggermap'>show</p> <div class="schememap"></div> </div>

    I know. It is necessary to hang up the handler of clicking on .wrapper.

      so hang up on the click event the disappearance of what you need. and all http://jsfiddle.net/6HuaB/