移動DIV無効化ボタン0px左マージン

Question

少し問題があります。私自身のスライダーをjQueryといくつかのCSS/javascriptを使って作成しようとしています。

私は、Div 660pxをボタンをクリックして左右に動かすようにスライダを設定しました。

しかし、私は、左余白が0のときに右ボタンを無効にしたいと思います。そして、div全体をいくつかのクリック後に0pxに巻き戻したいと思います。

これは可能ですか？ここで

は私のコードです：

<script language="javascript"> 
      function example_animate(px) { 
         $('#slide').animate({ 
          'marginLeft' : px 
       }); 
      } 
     </script> 
     <div class="container"> 
      <div class="row"> 
       <div class="contr-left"> 
        <a type="button" value="Move Left" onclick="example_animate('-=600px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a> 
       </div> 
       <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;"> 
        <div class="wrapper-outer"> 
         <div class="wrapper-inner" id="slide"> 
          <?php get_template_part('loop-reviews');?> 
         </div> 
        </div> 
        <div class="contr-right"> 
         <a type="button" value="Move Right" onclick="example_animate('+=600px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a> 
        </div> 
       </div> 
      </div> 
     </div> 

使用してコードイムは、このページからです：Page

まあ、Raynからのコードで私は非表示にするには、ボタンを得たが、今ではないでしょう左マージンが1pxか何かかを示します。だから私は今、これをしようとしている：（ところで動作しません）

イム今、これをしようとする：（ところで動作しません） `関数example_animate（PX）{

   $('#slide').animate({ 
        'marginLeft' : px 
     }); 
     var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left 
     if(slidemarginleft == '0px'){ 
      $('.contr-right').hide(); 
     } else (slidemarginleft == '1px') { 
      $('.contr-right').show(); 
     } 
     }` 

また、私は見ています要素が0PX

function example_animate(px) { 

        $('#slide').animate({ 
         'marginLeft' : px 
      }); 
      var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left 
      if(slidemarginleft == '0px'){ 
       $('.contr-right').hide(); 
      } 
      } 

Answer 1

にあなたが行うことができ、それぞれの後のステートメントは、チェックするためにクリック

function example_animate(px) { 
        $('#slide').animate({ 
         'marginLeft' : px 
      }); 
      if($('.xman').css("marginLeft")=='0px'){ 
       $('.contr-left').attr('disabled',true); 
      } 
     } 

Answer 2

使用これを持っている場合のマージン左はスタイルシートで設定されていないが、場合 <div style="margin-left:0px">content</div>

Answer 3

無効]ボタン際のマージン左：0PX

条件が満たされた場合は、ボタンを無効にするには、jQueryの.prop()メソッドを使用することができます。ここで（擬似コードで）の例である：ここではいくつかのクリック

後0PXする

function disableButton() { 
$(element).prop('disabled', true); 
} 
function checkMargin() { 
if ($(element).css("margin") === 0) { 
disableButton() 
} 
} 
checkMargin() 

巻き戻し、私はちょうどそれがしきい値あなたを満たしたときにクリックの回数を設定し、機能をトリガしたいです欲しいです。擬似コード：ここで

var threshold = 5 
var clicks = 0 

$(element).click(function(){ 
clicks++ 
if (clicks === 5) { 
rewind(); 
} 
clicks - 5 
}) 


function rewind() { 
$(element).css("margin", "0"); 
checkMargin() 
} 

Answer 4

が私の作業コードは、すべての助けに感謝です：

<script> 
     function example_animate(px) { 

        $('#slide').animate({ 
         'marginLeft' : px 
      }); 
      var slidemarginleft = $('#slide').css('margin-left'); //this gets the value of margin-left 
      if(slidemarginleft < '-3000px'){ 
       $('#slide').animate({marginLeft: '0px'}, 400); 
      } 
      var hide = $('#slide').css('margin-left'); //this gets the value of margin-left 
      if(hide >= '-50px'){ 
       $('.contr-left').addClass('showMe'); 
      } 
      var hideMe = $('#slide').css('margin-left'); //this gets the value of margin-left 
      if(hideMe <= '-50px'){ 
       $('.contr-left').removeClass('showMe'); 
      } 
      } 
</script> 
<!-- /Review script --> 

<section id="reviews"> 
    <div class="container"> 
     <div class="row"> 
      <div class="container"> 
       <div class="row"> 
        <h4>Reviews</h4> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="container"> 
      <div class="row"> 
       <div class="col-sm-1" style="width:40px;"> 
        <div class="row"> 
         <div class="contr-left"> 
          <a type="button" value="Move Left" onclick="example_animate('+=510px')"><i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true" ></i></a> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-10"> 
        <div class="row"> 
         <div id="carreview" class="carousel" data-ride="carousel" style="opacity: 1; display: block;"> 
          <div class="wrapper-outer"> 
           <div class="wrapper-inner" id="slide" style="margin-left:0px;"> 
            <?php get_template_part('loop-reviews');?> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-1" style="width:40px;"> 
        <div class="row"> 
         <div class="contr-right"> 
          <a type="button" value="Move Right" onclick="example_animate('-=510px')"><i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true" ></i></a> 
         </div> 
        </div> 
       </div> 
      </div> 
      <a href="<?php site_url(); ?>/reviews"><div class="btn btn-06">Bekijk alle reviews</div></a> 
     </div> 
</section>