0

横にスライドするバーを作ろうとしています。左に配置すると、右にスライドします。右に配置すると、左にスライドします。最終的に、これには複数のバーが並んで含まれ、邪魔にならないようにスライドしてさまざまな画像が表示されます。

今のところ、それを2回以上発射する方法がわからない場合を除いて、問題なく動作します。私は想像力の限りではJavaScriptの男ではないので、正しい方向に少し押していただければ幸いです。

ありがとう
ルーク

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var x=1;
    $(document).ready(function(){
      if( x==1 )
      {
        x=2;
        $("#block").click(function()
         {
          $("#block").animate({right:'20px'});
         });
        return;
      }

      if( x==2 )
      {
        x=1;
        $("#block").click(function()
         {
          $("#block").animate({left:'20px'});
         });
        return;
      }


    });
    </script>
    </head>



    <body>

    <p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p>

    <div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;">
    </div>

    </body>
    </html>
4

4 に答える 4

3

イベントをifステートメントからバインドし、条件をサイドイベントに入れます。

ライブデモ

$(document).ready(function(){
    var x=1;           
    $("#block").click(function()
    {
       if( x==1 )
       {
           x=2;
           $("#block").animate({right:'20px'});
       }
       else
       {
           x=1;
           $("#block").animate({left:'20px'});
       }
     });
 });

ルールサイクルを維持するには、以下のようにコードを変更する必要がある場合があります

ライブデモ

$(document).ready(function() {
    var x = 1;
    $("#block").click(function() {
        if (x == 1) {
            x = 2;
            $("#block").animate({
                right:  '20px',
                 left: '0px'
            });
        }
        else {
            x = 1;
            $("#block").animate({
                left: '20px',
                 right:  '0px'
            });
        }
    });
});​
于 2012-11-14T14:47:16.647 に答える
0

に変更すると、jQueryは正確な終了位置を認識しないため、leftとを簡単にアニメーション化することはできません。あなたができることは、これを自分で計算し、使用することだけです。他のいくつかのものは次のとおりです。rightleft: 0right: 0left

  • 数値の代わりにブール値を使用して反転します
  • バインドするイベントハンドラーを決定するのではなく、ハンドラーが呼び出されたときに何が発生するかを決定します
  • $(this)現在の要素に使用

http://jsfiddle.net/HZRWJ/

$(document).ready(function(){
    var isLeft = true;
    $("#block").click(function() {
        var fullWidth = $(document).width();
        var elemWidth = $(this).width();
        if(isLeft) {
            $(this).animate({ left: fullWidth - elemWidth });
        } else {
            $(this).animate({ left: 0 });
        }
        isLeft = !isLeft;
     });
});
于 2012-11-14T14:54:24.963 に答える
0

これはあなたが望んでいたことと似たようなことをしますか？

フィドルデモ

$("#block").data('position', 'left');
$("#block").click(function() {
    var elem = $(this);
    resetElementPosition(elem);
    switch (elem.data('position')) {
        case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break;
        case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break;
        }
});

function resetElementPosition(element)
{
    element.css({ 'left' : 'auto', 'right' : 'auto' });
}
于 2012-11-14T15:00:55.590 に答える
0

複数のバーを使用する場合は、jQueryオブジェクトに値を格納する方が簡単な場合があります。

$(document).ready(function(){

   $("#block").each( function( ) {

       // associate data with each element. At the moment there should 
       // only be one but if this is implemented as a class there may
       // be more
       $(this).data("x", 0);

   });

   $("#block").click( function( ) {

       // 0 will push it to the right as 0 => false
       if( $(this).data("x") ) { 

           $(this).data("x", 0 );

           // removing the css property allows you to use left & right
           $(this).css("right","").animate({left:'20px'});

       } else {

           $(this).data("x", 1 );

           $(this).css("left","").animate({right:'20px'});

       }
     });
   });

こちらのデモ

于 2012-11-14T15:19:13.963 に答える