1

スライド タブ アウトに問題があります。「ブック div」を「メニュー」(メニューの下) と同じ位置に配置したいのですが、ホバーすると --> 右側に約 5 ピクセル (アニメーション化) スライドします (文字通り動きのみ）、マウスの葉が同じ位置に戻ったとき。別のページに移動するためのボタンのように機能します。現時点では「黒のdiv」の上を滑っています。誰かがそれを機能させる方法を知っていますか? 任意の提案をいただければ幸いです..よろしくお願いします。

これは私のコードです:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


  <script type="text/javascript">
$(document).ready(function(){
$('.menu').mouseenter(function(){
    $('#menunav').stop().animate({
    'left': '0px'
    },300);
    });
    $('#menunav').mouseleave(function(){
    $('#menunav').animate({
    'left':'-100px'},2000);
    });

$('.book').hover(function(){
    $('.book').animate({
    'margin-right': '0px'
    },300);
    });
    $('.book').mouseleave(function(){
    $('.book').animate({
    'margin-right':'10px'},300);
    });
});

   </script>

私のhtml：

<body>
  <section id="menunav">
  <aside class="div_1">div_1</aside>
  <aside class="menu">menu</aside>
  <aside class="book">booking</aside>
  </section>
 </body>

CSS:

#menunav{
         position:absolute;
         width:150px;
         left:-100px;
         top:200px;
         background-color:transparent;
         height:150px;
         padding-right:10px;
         }
  .div_1{
         background-color:black;
         top:0px;
         float:left;
         height:150px;
         width:100px;
         color: white;
         }
   .menu{
         background-color:yellow;
         float:right;
         top:0px;
         height:70px;
         width:48px;
         }
   .book{
         top:70px;
         background-color:red;
         float:right;
         height:80px;
         width:48px;
         margin-right:10px;
         margin-left:-10px;
         }

お時間をいただきありがとうございました！

4

1 に答える 1

0

これはどう？

js を次のように変更します。

$('.menu').mouseover(function () { 
    $(this).parent().stop().animate({left: '0px'}, 'fast');
}).mouseout().parent().mouseleave(function() {
    $(this).stop().animate({left: '-100px'}, 'slow');
});
$('.book').hover(function() {
    $(this).stop().animate({right: '-5px'}, 'fast');
}, function () {
    $(this).stop().animate({right: '0px'}, 'fast');
});

そしてあなたのcssをこれに：

#menunav, .div_1, .menu, .book {position:absolute}
#menunav, .div_1 {height:150px}
#menunav {
    left:-100px;
    top:200px;
    width:150px;
}
.div_1 {
    background-color:black;
    width:100px;
    color: white;
    z-index:2;
}
.menu,.book{width:45px;right:0;padding:5px}
.menu {
    background-color:yellow;
    top:0px;
    height:60px;
}
.book {
    top:70px;
    background-color:red;
    height:70px;
}

フィドルを作った：http://jsfiddle.net/filever10/5PSJr/

于 2013-10-25T13:51:36.777 に答える