jQuery幻燈片標籤問題

我的幻燈片標籤頁有問題。我希望「書籍div」與「菜單」位於相同的位置（菜單下），但是當您懸停 - >滑出（動畫）右邊大約5px（字面上就是移動），當鼠標葉子回到相同位置時。它的工作就像一個按鈕導航到另一個頁面。目前正在滑過「黑色格子」。有誰知道如何使它工作？任何建議將不勝感激。預先感謝您。jQuery幻燈片標籤問題

這是我的代碼：

<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

烏姆仍不太對勁，因爲「預訂」有單獨工作。如果您只懸停預訂 - 它應該滑向右側僅「預訂」而不是「菜單」。 – Anita

優秀的作品！非常感謝:)））我現在很高興:)） – Anita

您是否使用位於頭部的腳本： ?? – Anita

jQuery幻燈片標籤問題

回答

相關問題