Проблема с jQuery-слайдом

0

У меня проблема с моей вкладкой. Я хочу, чтобы "книжный div" находился в том же положении, что и "меню" (в меню), но когда вы hover--> выдвигаетесь (оживляете) вправо примерно на 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;
         }

Спасибо вам большое за ваше время!

Теги:
slide
tabs
jquery-animate

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/

Поделиться
  • 0
    ммм все еще не совсем правильно, потому что «бронирование» должно работать индивидуально. Если вы зависаете только при бронировании - вправо должно быть только «бронирование», а не «меню».
  • 0
    превосходная работа!!! большое спасибо :))) я так счастлива сейчас :))
Показать ещё 10 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню