Проблема с jQuery slide-tab-out

У меня проблема с моей вкладкой в виде слайдов. Мне нужно, чтобы «книжный div» находился в том же положении, что и «меню» (в меню), но когда вы наводите -> на слайд (анимировать) вправо около 5 px (буквально только движение), и когда листья мыши возвращаются в одно и то же положение. Он будет работать как кнопка, чтобы перейти на другую страницу. На данный момент скользит по «черному div». Кто-нибудь знает, как заставить его работать? Любые предложения будут оценены .. Спасибо заранее.Проблема с jQuery slide-tab-out

Это мой код:

<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; 
     }

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

источник

2013-10-25 Anita

Как насчет этого?

изменить 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-25 13:51:36 FiLeVeR10

UMM еще не совсем верно, потому что "заказ" должен работать индивидуально. Если вы наведете только бронирование - он должен сдвинуться вправо, только «бронирование», а не «меню». – Anita

отличная работа !!! большое спасибо :))) Я так счастлив сейчас :)) – Anita

Вы использовали этот скрипт, расположенный в главном разделе: ?? – Anita

Проблема с jQuery slide-tab-out

ответ

Смежные вопросы