从左侧滑动拨动

Question

我试图在Shopify商店的右侧菜单中创建此幻灯片。我可以使用slideToggle（）来打开和关闭div，但是当我尝试添加其他功能或效果时，它不会起作用。

我已经试过这样的事情藏汉：

.toggle('slide', direction: 'right', 500) 

而且，我想隐藏功能，如果你点击#sign格之外的工作。任何人都知道一个功能，使我能够做到这一点？

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#sign").hide(); 
    $(".login-show1").show(); 

    $('.login-show1').click(function(){ 
     $("#sign").slideToggle(); 
    }); 

}); 

</script> 

<a class="login-show1">SIGN IN</a> 
<div id="sign"> 
    <div id="exit" href="#" class="login-show1">x</div> 
    Here is sign in form 
</div> 

Answer 1

$('.login-show1').click(function(){ 
    $('#myDiv').toggle('slide', {direction : right}, 500, function() { 
     // callback when animation completed, add other effect here 
    }); 
}); 

$('#myDiv').click(function(e){ 
    e.stopPropagation(); 
}); 

$('body').click(function(){ 
    /* 
    hide $('#myDiv') with: 
    - $('myDiv').hide() 
    or 
    - $('#myDiv').toggle('slide', {direction : left}) 
    */ 
}); 

Answer 2

对于下面的代码工作，你必须包括jQuery UI

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

更改你的脚本：

$(document).ready(function(){ 

    $("#sign").hide(); 
    $(".login-show1").show(); 


    $(".login-show1").on("click", function() { 
     var slided = false; 

     $(document).on('click', function(){ 
      $('#sign').toggle('slide', {direction:'left'}, 700); 
      slided = !slided; 
      if(!slided) { 
       $(document).off('click'); 
      } 
     }); 

    }); 

});