1

我的滑出标签有问题。我希望“book div”与“menu”（在菜单下）位于相同的位置，但是当您悬停时 - >向右滑出（动画）约 5 px （字面上只是运动）以及当鼠标离开时回到相同的位置。它的工作方式有点像导航到另一个页面的按钮。目前正在滑过“黑色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 回答