如何使用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});
});