Question

我的幻灯片标签出了问题。我希望“book div”与“菜单”（在菜单下）处于同一位置，但是当你悬停时 - ＆gt;滑出（动画）向右约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;
         }

非常感谢你的时间！

Answer 1

这个怎么样？

将你的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/

jQuery slide-tab-out问题

1 个答案: