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

Question

我正在尝试自定义导航，因为它的滑动效果没有按预期工作。请查看我的代码并告诉我您的建议。

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

Answer 1

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

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