Question

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

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

Answer 2

只需将您的jQuery更改为：

$(document).ready(function(){
    $('#slide-btn').click(function(){
        $('#menu').animate({width:'toggle'}, 1000);
    });
});

Answer 3

试试这个

使用Jquery UI js

$(document).ready(function () {
    $('#slide-btn').click(function () {
        $('#menu').toggle("slide", 1000);
    });
});

DEMO

Answer 4

使用animate做好滑动，这里是Slide In和Out的代码

$(document).ready(function(){
    $('#menu').css({'display':'none','border':'1px solid blue','height':'320px'});
    $('#slide-btn').click(function(){        
        if($('#menu').is(":visible")){        
            $('#menu').animate({width:'0px'}).hide(100);
        }
        else{            
            $('#menu').show().animate({width:'170px'});
        }
    });
});

滑动效果它在jQuery中不起作用

此处的图片表示

4 个答案: