0

これを理解するのを手伝ってもらえますか？私はこれからこのページスライドメソッドを使用しようとしています

http://jsfiddle.net/XNnHC/942/

$(document).ready(function()
{
    var slider_width = $('.pollSlider').width();//get width automaticly
  $('#pollSlider-button').click(function() {
    if($(this).css("margin-right") == slider_width+"px" && !$(this).is(':animated'))
    {
        $('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width});
    }
    else
    {
    if(!$(this).is(':animated'))//perevent double click to double margin
        {
            $('.pollSlider,#pollSlider-button').animate({"margin-right": '+='+slider_width});
        }
    }


  });
 });

そして、これは私が試してきたことです

http://jsfiddle.net/ejkim2000/f7DVK/

しかし、私はいくつかの問題を抱えています。

私が持っている最初の問題は、トリガーボタンの場所がマージンを取得するため、場所の後の文が押されていることです。このコードで#pollSlider-buttonを削除しました

$('.pollSlider,#pollSlider-button').animate({"margin-right": '-='+slider_width}); }

ボタンからのマージンを無効にしましたが、スライドページが右にスライドし続けることになりました。ボタンにマージンを持たずにスライド ページを機能させる方法はありますか?

もう 1 つの問題は、アクションを閉じるためにスライド ページに別のボタンを入力することですが、単に機能せず、その理由も理解できません。誰かがこの閉じるボタンを機能させるのを手伝ってくれることを願っています.

参考までに、CSSで幅と高さを使用したいのですが、スライドページをレスポンシブにする方が簡単で、この方法を他の方向にも適用したいからです。

どうもありがとう！

4

1 に答える 1

0

これを試して

働く デモ1

これは、スライダーを閉じたり開いたりするのと同じボタンです

$(document).ready(function () {
    var slider_width = $('.pollSlider').width(); //get width automaticly
    $('#pollSlider-button').click(function () {
        if ($('.pollSlider').css("margin-right") == 0 + "px") {
            $('.pollSlider').animate({
                "margin-right": '-=' + slider_width
            });
        } else {

            $('.pollSlider').animate({
                "margin-right": '+=' + slider_width
            });

        }


    });
});

これを試して

働く デモ2

こちらは開閉用の別ボタン付きです

$(document).ready(function () {
    var slider_width = $('.pollSlider').width();
    $('#pollSlider-button').click(function () {   //open button
        if ($('.pollSlider').css("margin-right") == "-" + slider_width + "px") {
            $('.pollSlider').animate({
                "margin-right": '+=' + slider_width
            });
        }
    });
 $('#pollSlider-button2').click(function () {  //close button with different id
        if ($('.pollSlider').css("margin-right") == 0 + "px") {
            $('.pollSlider').animate({
                "margin-right": '-=' + slider_width
            });
        }
    });

});

これが役に立てば幸いです、ありがとう

于 2013-09-01T18:11:48.997 に答える