0

Web サイトにシンプルな垂直スライダーを作成したいと考えています。このシンプルなコードで

$('.down').click(function(){
    $('#container_slider_youtube').animate({ marginTop: '-=410px'}, 1000);
});

$('.up').click(function(){
    $('#container_slider_youtube').animate({ marginTop: '+=410px'}, 1000);
});

コンテナにすべてを入れて上下にスライドさせることができますが、これは正常に機能します。しかし、私が抱えている問題は、divの位置を完全に台無しにする上または下のボタンを押し続けることができるということです. では、この問題を解決する良い方法は何ですか?

4

1 に答える 1

1

おそらく、相対値に依存せず、代わりに新しい静的な値を計算して に割り当てる方がよいでしょう.animate()。

また、このようなアプリケーションでは、に依存するのではなく、 CSSpositionを使用する方がはるかに簡単であることがわかりました。一部の (古い) ブラウザーは、千の地獄の火で燃える負のマージンを嫌うようです。topmargin

// example
var container = $('#container_slider_youtube'),
    parent = container.parent(),
    step = 410
    ;
$('.down').click(function () {

    var currentTop = container.css('top'),
        newTop = Math.max(0, currentTop - step)
        ;

    container.animate({ marginTop : newTop }, 1000);

});

.upこれをクリックに適応させることができます。コンテナーの親の高さを考慮してください (.height()最も可能性の高いものを使用)。

CSSpositionルートを使用する場合は、コンテナーの親が少なくとも position:relativeであり、コンテナーも少なくとも同じであることを確認してください。私は個人的にコンテナをに設定しましたposition:absolute。

于 2013-02-21T11:37:36.727 に答える