jQuery動畫功能行爲不正確

我想創建一個使用jQuery的側面菜單，其中div sideBarMinified將隱藏並懸停並顯示sideBar。在鼠標懸停狀態下，將會隱藏sideBar，並顯示sideBarMinified。jQuery動畫功能行爲不正確

這是我有：

HTML：

<div class="sideBarMinified"> 
    <div class="topClear">&nbsp;</div> 
    <img src="images/miniLogo.png"> 
</div> 
<div class="sideBar"> 
    <div class="topClearBig">&nbsp;</div> 
    <img src="images/logo.png"> 
    <div class="menuClear"></div> 
     <a href="#">Sample</a> 
</div>

JS：

$(document).ready(function() { 
    $(".sideBar").hide(); 
    $.backstretch(["images/cover.jpg"],{fade:2000}); 
    $(".sideBarMinified").mouseover(function(){ 
     $(".sideBar").show(); 
     $(".sideBarMinified").animate({left: "-=60px"}, 0); 
     $(".sideBar").animate({left: "+=272px"}, 500); 
    }); 
    $(".sideBar").mouseout(function() { 
     $(".sideBar").animate({left: "-=272px"}, 500); 
     $(".sideBarMinified").animate({left: "+=60px"}, 700); 
    }); 
});

CSS：

div.sideBarMinified { 
    position:absolute; 
    left:0px; 
    width:20px; 
    height:100%; 
    background-color:rgba(208,198,168,0.9); 
    border-right:1px solid #333333; 
    padding:0 15px 0 15px; 
    z-index:999; 
} 
div.sideBar { 
    position:absolute; 
    left:-272px; 
    width:272px; 
    height:100%; 
    background-color:rgba(208,198,168,0.9); 
    padding:0 2px 0 45px; 
    z-index:500; 
}

的問題是，當我將鼠標懸停在<a>標籤， div sideBar被隱藏，div sideBarMinified正在向左移動。我的代碼有什麼問題？

來源

2012-10-19 Jude

div.sideBar和a.sideBar是否有相同的類是故意的？將它們更改爲不同的類將會減少代碼中的混淆。 –

@MattStone，實際上我認爲''標籤的懸停問題就是該類問題。但在此之前，''標籤沒有任何類別。所以在這種情況下，''標籤的類別無關緊要。 – Jude

任何人都可以幫忙嗎？ – Jude

我覺得這個代碼應該爲你工作。

$(document).ready(function() { 
$(".sideBar").hide(); 
$.backstretch(["images/cover.jpg"], { 
    fade: 2000 
}); 
$(".sideBarMinified").mouseover(function() { 
    $(".sideBar").show(); 
    $(".sideBarMinified").animate({ 
     left: "-=60px" 
    }, 0); 
    $(".sideBar").animate({ 
     left: "+=272px" 
    }, 500); 


}); 
$(".sideBar").mouseleave(function() { 

    $(".sideBar").animate({ 
     left: "-=272px" 
    }, 500); 
    $(".sideBarMinified").animate({ 
     left: "+=60px" 
    }, 700); 
}); });

來源

2012-10-19 04:55:24 ankur140290

它並不一定是我想要的，但我得到了錯誤。我的錯誤是我使用'mouseout'函數而不是'mouseleave'。多謝，夥計！欣賞它！ – Jude

您的問題是由於.sidebar上使用的硬編碼寬度和負邊距造成的。標準的CSS盒子模型（content-box）ADDS填充到寬度，產生比您期望的更寬的盒子。

div.sideBar { 
    left: -319px; 
    width: 272px; <!-- width is actually 319px when including padding --> 
    padding: 0 2px 0 45px; 
}

我已經更新了你的代碼的小提琴，檢查出來，讓我知道如果您有任何問題。

http://jsfiddle.net/Hm7zB/1/

我建議你閱讀有關box-sizing: border-box;它通過定義寬度包括填充物的行爲更合乎邏輯的方式：http://paulirish.com/2012/box-sizing-border-box-ftw/

來源

2012-10-19 04:25:40

嗨馬特。謝謝回覆。然而，當我開始將鼠標懸停在''標籤上時，'sideBar'隱藏自己的代碼。我的意圖是製作一個菜單，所以如果用戶將鼠標懸停在鏈接上，該框不應該隱藏。 – Jude

jQuery動畫功能行爲不正確

回答

相關問題