我怎样才能使div从右到左滑动

  • 本文关键字:div 从右到左 jquery css
  • 更新时间 :
  • 英文 :


如何使用css和jQuery使div从右到左滑动?但是我不能从jQuery使用toggleClass(),因为我想使div可以向下滚动,当它出来,如果我使用toggleClass()滚动条消失。这是我从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;
}

根据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);
});

为什么不使用jQuery动画呢?http://api.jquery.com/animate/

一些代码:

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

最新更新