javascript - jQuery动画功能异常

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

最佳答案

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

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