0

我有一个在 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>

非常感谢您的帮助。

4

1 回答 1

0

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

于 2012-05-31T18:43:30.133 回答