jQuery的滑動側欄從左到右依次爲

www.wookmark.com
http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm。

這是我寫了多少代碼。但這是生澀的。

任何人都可以提出與aniamtions一個更好的解決方案/寬鬆/切換等
我想要的代碼是獨立的左參數，即$（「＃幻燈片」）的。CSS（「左」，「-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>

來源

2013-04-01 django

你需要animate()方法 -

var width = $('#slide').width() - 10; 
$('#slide').hover(function() { 
    $(this).stop().animate({left:"0px"},500);  
    },function() {   
    $(this).stop().animate({left: - width },500);  
});

在這裏，我前加入.stop()。這將清除由於快速移動鼠標而建立的動畫隊列。

DEMO

來源

2013-04-01 14:33:12 SachinGutte

謝謝@ phobos.It工程，我想。但是，如果我在滑塊div上快速多次懸停鼠標，它會變得瘋狂。無論如何，我們可以解決這個問題？ – django

@django查看更新的答案以擺脫那種奇怪的效果。 – SachinGutte

再次感謝你。現在它像魅力一樣工作。 – django

jQuery的滑動側欄從左到右依次爲

回答

相關問題