從左側滑動撥動

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'); 
      } 
     }); 

    }); 

});