javascript - jQuery动画函数行为不端

Question

我正在尝试使用 jQuery 创建一个侧边菜单，其中 divsideBarMinified将被隐藏并悬停并显示sideBar. 鼠标移出时，sideBar将被隐藏并sideBarMinified显示。

这是我所拥有的：

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>标签上时，divsideBar被隐藏并且 divsideBarMinified向左移动。我的代码有什么问题？

Answer 1

您的问题是由于.sidebar 上使用的硬编码宽度和负边距。标准 CSS box-model ( content-box) 将填充添加到宽度，从而产生比您预期的更宽的框。

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

我已经在 Fiddle 中更新了您的代码，请检查一下，如果您有任何问题，请告诉我。

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

我建议box-sizing: border-box;通过将宽度定义为包括填充来阅读哪些行为更合乎逻辑：http: //paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

我认为这段代码应该适合你。

$(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);
}); });​