jquery - 滑动效果在jQuery中不起作用

我正在尝试自定义导航，因为这种滑动效果无法正常工作。请查看我的代码，并让我知道您的建议。

Demo LINK

的HTML

<div style="width:320px;height:320px;border:1px solid red;">
  <div id="col1" style="float:left">
    <div id="menu">Slide DIV</div>
  </div>
  <div id="col2">
    <div>This content will display on page load. <br/>
      Onclick of "Slide" button this entire thing will move to right side and Menu div should slide in from left but now it just displaying without sliding effect.
      <input type="button" id="slide-btn" value="Slide"/>
    </div>
  </div>
</div>

的CSS

#menu{display:none}

js

$(document).ready(function(){
    $('#slide-btn').click(function(){
        $('#menu').css({'display':'block','width':'170px','border':'1px solid blue','height':'320px'});
        $('#menu').show("slide",{direction:"up"},2000);

    });
});

图片表示参考这里

http://www.mobile-patterns.com/custom-navigation
http://img2.mobile-patterns.com/img/320/1398782204339-2014-04-29%2010.35.53.png

最佳答案

您正在将#menu宽度设置为170，这已经是其目标宽度。将宽度设置为0，然后为宽度设置动画。

$('#menu').css({'display':'block','width':'0','border':'1px solid blue','height':'320px'});
$('#menu').animate({width:170},2000);

关于jquery - 滑动效果在jQuery中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24448117/