Question

如何使用css和jQuery使div从右侧向左侧滑入？但我无法使用jQuery中的toggleClass()，因为我想让div在它出来时向下滚动，如果我使用toggleClass（），滚动条就会消失。 This is the bug that I get from toggleClass()

这是我的div代码：

<div id="menu-home" >
  <form>
    <input type="text" class="search rounded" id="input" placeholder="Search.." >
  </form>
  <span class="categories">Categories</span>
  <ul>
    <li id="menu1">Menu</li>
    <li id="menu2">Menu</li>
    <li id="menu3">Menu</li>
  </ul>
</div>

这是触发菜单的按钮

<div class="btn-right button_search" style="">
  <img src="img/search_icon.png" />
</div>

这是我的css

#menu-home-search{
    width: 80%;
    height: 100%;
    right: 0;
    padding-top:50px;
    margin-left: auto;
    margin-right: 0;
    overflow: scroll;
    position: fixed; 
    background: #34a6db;
    z-index:1000;
}

Answer 1

为什么不使用jQuery Animate？ http://api.jquery.com/animate/

一些代码：

$( "#clickme" ).click(function() {
  $( "div" ).animate({
    marginLeft: "-=50"
  }, 5000});
});

Answer 2

根据Rusher的回答，动画应该有效。这是jsfiddle

CSS：

#movingImage
{
    margin-left:100%;

    width:100px;
    height:50px;
    background:#ff0000;
}

HTML：

<body>
    <div id="movingImage"></div>
    <a href="#" id="clickMe">Make it Move!</a>
</body>

JS：

$('#clickMe').click(function(){
    $('#movingImage').animate({'marginLeft':0}, 2000);
});

如何让div从右侧向左侧滑入？

2 个答案: