我正在尝试创建一个效果类似于
的滑动侧边栏- www.wookmark.com
- http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm .
这就是我编写代码的程度。但这是生涩的。
- 谁能提出更好的动画/缓动/切换等解决方案
- 我希望代码独立于左参数,即 $("#slide").css("left", "-150px"); 它应该能够以各种 div 宽度滑入/滑出
有什么想法吗?
CSS
#slide{
border:1.5px solid black;
position:absolute;
top:0;
left:0;
width:150px;
height:100%;
background-color:#F2F2F2;
layer-background-color:#F2F2F2;
}
HTML
<div id="slide" style="left: -150px; top: 0px; width: 160px;">
<p>Something here</p>
</div>
Jquery
<script>
jQuery(document).ready(function() {
$('#slide').mouseover(function() {
$("#slide").css("left", "0px");
});
$('#slide').mouseout(function() {
$("#slide").css("left", "-150px");
});
});
</script>
最佳答案
你需要animate()方法-
var width = $('#slide').width() - 10;
$('#slide').hover(function () {
$(this).stop().animate({left:"0px"},500);
},function () {
$(this).stop().animate({left: - width },500);
});
这里我之前添加了.stop()
。这将清除由于快速移动鼠标而建立的动画队列。
关于jquery滑动侧边栏从左到右,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15745240/