Question

请你看看This Demo，让我知道如何动态地将滑块从值运行到最大值再回到分钟......

＆＃13;

  $(function() {
    var slider = $( "#slider" ).slider({
     range: "min",
	 min: 1,
	 max: 280,
	  value: 140
    
    });

$('.btn-succes').on('click',function(){
    slider.slider('value', slider.slider('value') );
    return false;
});
    
      });

＆＃13;

@import url(https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/images/ui-bg_flat_10_000000_40x100.png)

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <br />
  <div class="col-md-2">
     <div id="slider"></div>
  </div>
  
  <div class="row">
  
  <button class="btn btn-success">Run</button>
  <button class="btn btn-info">Stop</button>
  
  </div>
</div>

＆＃13;

Answer 1

您可以将setInterval和clearInterval用于动画方面。当滑块更新时，您可以通过订阅slidechange事件并调用$("#slider").slider("value")来检查滑块的当前值。我在我的例子中重命名了按钮，以便更好地描述他们的行为。

点击 here 进行演示。

<强> HTML：

<div id="slider"></div>

<button class="btn btn-run">Run</button>
<button class="btn btn-stop">Stop</button>

<强> JQuery的：

//Global values.
var increment = 1;
var slideMax = 100;
var animationDelay = 50;
var sliderVal = 0;
var sliderInterval = {};

$(function() {
  $("#slider").slider({
    animate: "fast",
    max: slideMax
  });
});

//Subscribe to the "slidechange" event to keep track of the slider value.
$("#slider").on("slidechange", function(event, ui) {
  //If the slider value reaches the max, set the interval to -1 to start animating backwards.
  if ($("#slider").slider("value") == slideMax) {
    increment = -1;
  } else if ($("#slider").slider("value") == 0) {
    increment = 1;
  }
});

$(".btn-run").on("click", function() {
  //Set the slider value to the current value to start the animation at the correct point.
  sliderVal = $("#slider").slider("value");
  sliderInterval = setInterval(function() {
    sliderVal += increment;
    $("#slider").slider("value", sliderVal);
  }, animationDelay);
});

$(".btn-stop").on("click", function() {
  //Call clearInterval to stop the animation.
  clearInterval(sliderInterval);
});

动画（不停）jQuery Ui滑块按钮点击

1 个答案: