Question

我正在尝试使用jQuery创建一个侧边菜单，其中div sideBarMinified将被隐藏并悬停并显示sideBar。在mouseout上，隐藏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>标记上时，隐藏了div sideBar，而div sideBarMinified正在向左移动。我的代码出了什么问题？

Answer 1

您的问题是由.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/

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

jQuery动画功能行为不端

2 个答案: