Question

我有一个侧边栏滑块，可以在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>

非常感谢您的帮助。

Answer 1

感谢您的观看。看起来MobyD的建议（在评论中）持有密钥，即在动画宽度之前使用toggle（），或至少显示div上的show（）。感谢帮助。

Chrome＆amp;带有Animate和Show / Hide的Safari JQuery Bug

1 个答案: