带有动画和显示/隐藏的 Chrome 和 Safari JQuery 错误答案

【问题标题】：Chrome & Safari JQuery Bug with Animate and Show/Hide带有动画和显示/隐藏的 Chrome 和 Safari JQuery 错误
【发布时间】：2012-05-31 12:58:51
【问题描述】：

我有一个在 FF 和 IE 中运行良好的侧边栏滑块。点击 div，侧边栏滑出；再次单击它会向后滑动。然而，在 Chrome 和 Safari 中，它第一次工作正常（动画宽度向外和动画宽度向后），但第二次，应该滑出的 div 部分出现在要单击的 div 下方。

我创建了一个非常简单的问题示例。这是javascript：

var slider_state = 'hidden';

function reveal_slider()
{
$('#reveal_div').animate({width:500});
slider_state = 'shown';
}

function hide_slider ()
{
slider_state = 'hidden';
$('#reveal_div').animate({width:0}, function(){
    $('#reveal_div').hide();
    });
}

$(document).ready(function(){
$('#slider_trigger').click(function(){
    if (slider_state == 'hidden')
        {
        reveal_slider();
        }  
        else
        {
        hide_slider();
        }
    });
});

还有css：

#slider_container
        {
        position:fixed;
        top:350px;
        right:0px;
        z-index:21;
        }
    #slider_trigger
        {
        float:left;
        width:35px;
        height:100px;
        background-color:yellow;
        }
    #reveal_div
        {
        float:left;
        height:200px;
        display:none;
        background-color:blue;
        border:3px black solid;
        }

还有html：

<body>
<div id='slider_container'>
    <div id='slider_trigger'>
        Click
    </div>  
    <div id='reveal_div' >
    </div>
</div>
</body>

非常感谢您的帮助。

【问题讨论】：

一个 JSFiddle 实际上会很有帮助。出于好奇，您是否有理由不使用切换功能？

标签： jquery google-chrome safari jquery-animate show

【解决方案1】：

感谢观看。看起来 MobyD 的建议（在 cmets 中）是关键，即在为其宽度设置动画之前使用 toggle()，或者至少在要显示的 div 上使用 show()。感谢您的帮助。

【讨论】：