移動DIV禁用按鈕0px左邊距

我有一點問題。我試圖創建我自己的滑塊使用jQuery和一些CSS/JavaScript。移動DIV禁用按鈕0px左邊距

我得到我的滑塊工作移動一個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>

使用的代碼IM是從這個頁面：Page

那麼，從Rayn代碼中，我得到了按鈕可隱藏，但現在不會顯示左邊距是1px還是什麼的。所以，我現在想的：（不BTW工作）

林正試圖這樣的：（不BTW工作）`函數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(); 
     } 
     }`

而且我看到該保證金左未在樣式表設置，但在 <div style="margin-left:0px">content</div>

來源

2016-04-20 Steggie

你可以，如果做一個後每個語句點擊查看如果元素具有0像素

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(); 
      } 
      }

來源

2016-04-20 09:29:16

這類作品。謝謝。我用一段時間修補它... – Steggie

爲什麼不是從一開始就隱藏的正確的控制器。當我點擊它時，它會消失... – Steggie

因爲每次運行該點擊函數時#slide margin-left都會得到更新，所以您必須每次檢查新值是否爲0px。如果在剩餘空白進入負數時不失效，例如-50px，則在IF語句中，執行 'if（slidemarginleft <='0px'）{（'。contr-right'）。hide（）; }' –

使用此

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

來源

2016-04-20 09:34:51

我猜這個.xman應該改成#slide？ – Steggie

禁用按鈕時保證金左：0像素

您可以使用jQuery的.prop()方法來禁用一個按鈕，如果滿足條件。這裏有一個例子（在僞代碼）：

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

倒帶一些點擊後爲0px

在這裏，我只是設置點擊計數和觸發功能，當它符合你的門檻想。僞代碼：

var threshold = 5 
var clicks = 0 

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


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

來源

2016-04-20 10:00:36 Wandering

我不是世界上最好的jQuery編碼器。有沒有人可以幫我用這個代碼和我的。所以我可以測試它，如果它有效？ – Steggie

這是我工作的代碼，感謝所有幫助：

<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>

來源

2016-05-03 10:10:26 Steggie

移動DIV禁用按鈕0px左邊距

回答

相關問題