0

リンク（.toggle-caption）をクリックすると、右側からdivを画面上または画面外にスライドさせようとしています

両方の値が右からの位置に基づいている場合、これはうまく機能しました。

$('.toggle-caption').toggle(
        function()
            {
            $('#caption-box').animate({right: "480px"}, 500);
            },
        function()
            {
            $('#caption-box').animate({right: "-2000px"}, 500);
            }
);

ただし、左右の値を切り替えようとすると、機能しなくなります。

$('.toggle-caption').toggle(
        function()
            {
            $('#caption-box').animate({left: "480px"}, 500);
            },
        function()
            {
            $('#caption-box').animate({right: "-2000px"}, 500);
            }
    );

#caption-box の幅は 2000 ピクセルですが、この一部のみが表示されます (画面の解像度によって異なります)。ただし、スライドインするときは、必ず含まれる div の端から 480 ピクセル離して配置する必要があります。したがって、「左」の値が必要でした。

どんな助けでも大歓迎です！

RT

4

2 に答える 2

2

私は次のものを使用することになりましたが、これは正常に機能します。

$('.toggle-caption').toggle(
    function()
        {
        $('#caption-box').animate({left: "480px"}, 500);
        },
    function()
        {
        $('#caption-box').animate({left: "100%"}, 500);
        }
);

jQuery v 1.8.2 が使用されたことに注意してください。以前のバージョンでは、Webkit ブラウザーは px 値とパーセンテージ値の切り替えを好まないようでした。

于 2012-11-14T10:16:44.940 に答える
0

toggle()そのように使用することは非推奨であるため、おそらく代わりにフラグを使用する必要がありますdata()。関数を使用すると、それがかなり簡単になります。また、左から 480px にアニメーション化するには、ウィンドウ幅からその値を差し引いて、代わりに「右」で使用する必要がある値を取得します。

$('.toggle-caption').data('state', true).on('click', function() {
    var state = $(this).data('state'),
        dist  = state ? $(window).width() - 480 : -2000;
    $('#caption-box').stop(true, true).animate({right: dist}, 500);
    $(this).data('state', !state);
});
于 2012-11-08T18:21:06.463 に答える