将长度添加到'slide''left'

时间:2014-01-08 03:49:58

标签: jquery jquery-ui

我想知道如何编辑div向左滑动的方向量。到目前为止,我只是编辑“补间”或“幻灯片”效果,我希望滑出500px;并停止。

http://jsfiddle.net/7m7uK/523/

$('#loginPanel').ready(function() {

                if ($('#userNav').is(':hidden')) {

                   $('#userNav').show('slide',{direction:'left'},5000);
                }    
});

1 个答案:

答案 0 :(得分:2)

一种方法是animate margin所需数量的pixels

$("element").animate({marginLeft : "-20px"}, 500);

注意:"slide"通常用于元素的完整width/height。您可以尝试设置distance参数,但它不会为您提供所需的效果。

     <script>
      $("#hide").click(function(){
         $(".target").hide( "slide", 
                     { direction: "down" ,
                       distance: "200px" }, 2000 );
      });

      $("#show").click(function(){
         $(".target").show( "slide", 
                      {direction: "up" }, 2000 );
      });



      });
       </script>
       <style>
          p {
               background-color:#bca;
               width:200px; 
               border:1px solid green; 
            }
         div{ width:100px; 
                height:100px; 
                background:red;  
            }
      </style>
    </head>
    <body>

   <p>Click on any of the buttons</p>
   <button id="hide"> Hide </button>
   <button id="show"> Show</button> 

   <div class="target">
   </div>