我正在尝试创建一个滑动侧栏,其效果类似于
- www.wookmark.com
-
http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm.
这就是我编写代码的程度。但这很不稳定。
- 任何人都可以提出更好的动画/缓动/切换等解决方案
- 我希望代码独立于 left 参数,即 $("#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>
你需要动画() http://api.jquery.com/animate/方法 -
var width = $('#slide').width() - 10;
$('#slide').hover(function () {
$(this).stop().animate({left:"0px"},500);
},function () {
$(this).stop().animate({left: - width },500);
});
这里我添加了.stop()
前。这将清除由于快速移动鼠标而建立的动画队列。
DEMO http://jsfiddle.net/Ztv5K/1/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)