0

FFとIEで正常に動作するサイドバースライダーがあります。divをクリックすると、サイドバーがスライドします。もう一度クリックすると、スライドして戻ります。ただし、ChromeとSafariでは、最初は正常に機能しますが（アニメーションの幅を外側に、アニメーションの幅を後ろに）、2回目は、代わりにスライドするはずの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 に答える