5

に似た効果を持つスライド式サイドバーを作成しようとしています

  1. www.wookmark.com
  2. http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm .

ここまでコードを書きましたが、ぎくしゃくしています。

  1. 誰でもアニメション/イージング/トグルなどでより良い解決策を提案できますか
  2. $("#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>

Jクエリ

<script>
    jQuery(document).ready(function() {
        $('#slide').mouseover(function() {
            $("#slide").css("left", "0px");
        });

        $('#slide').mouseout(function() {
            $("#slide").css("left", "-150px");
        });

    });
 </script>
4

1 に答える 1

10

animate()メソッドが必要です-

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

こちらは以前追記しまし.stop()た。これにより、マウスをすばやく動かしたために蓄積されたアニメーション キューがクリアされます。

デモ

于 2013-04-01T14:33:12.253 に答える