jQuery滑动侧栏从左到右 [英] jquery sliding side bar Left to right
本文介绍了jQuery滑动侧栏从左到右的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个滑动边栏,其效果类似于
I am trying to create a sliding side bar with effects similar to
- www.wookmark.com
- http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm .
这是我编写代码的距离.但这很生涩.
This is how far I wrote the code.But this is jerky.
- 有人可以提出带有动画效果/缓动/切换等更好的解决方案
- 我希望代码独立于左参数,即$(#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()
.这将清除由于快速移动鼠标而建立的动画队列.
Here I've added .stop()
before. This will clear animation queue that is built up because of moving mouse quickly.
DEMO
这篇关于jQuery滑动侧栏从左到右的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文