Question

如何在页面加载时使用自动更新值为jQuery ui滑块设置动画。

当页面加载时，应该从左到右设置动画而不是后面的问题，当滑块开始设置动画时，值不会更新

<!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

        </head>
        <body>

            <p>
                <label for="amount">Minimum number of bedrooms:</label>
                <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
            </p>
            <div id="slider-range-max"></div>
            <!-- Scripts -->
            <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
            <script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
            <script>
            $(function() {
            $( "#slider-range-max" ).slider({
            range: "max",
            min: 0,
            max: 10000,
            step: 100,
            value: 0,
            animate: true,
            slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            },
            change: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            }
            });
            $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
            $('.ui-slider-handle').animate({
                left: '0%'
            }, 1500, 'linear').animate({
                left: '50%'
            }, 1200, 'linear').animate({
                left: '40%'
            }, 1300, 'linear');
            });

            </script>
        </body>
    </html>

Answer 1

为了将初始动画期间的值更改同步到金额输入，您可以使用动画的步骤事件和现在值。如果您希望在用户更改值时在每个动画步骤中更改金额，则需要在幻灯片事件中执行类似的操作。

$(function() {
    var maxValue = 10000;

    $( "#slider-range-max" ).slider({
      range: "max",
      min: 0,
      max: maxValue,
      step: 100,
      value: 0,
      animate: true,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      },
      change: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });

    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

    $('.ui-slider-handle')
      .animate({ left: '0%' }, 
      { 
        duration: 1500, 
        easing: 'linear', 
        step: function (now) { 
          if (now <= 0)
            return;

          $("#amount").val(Math.round((now / 100) * maxValue));
        }
      })
      .animate({ left: '50%' }, 
      { 
        duration: 1200, 
        easing: 'linear', 
        step: function (now) { 
          if (now <= 0)
            return;

          $("#amount").val(Math.round((now / 100) * maxValue));
        }
      })
      .animate({ left: '40%' }, 
      { 
        duration: 1300, 
        easing: 'linear', 
        step: function (now) { 
          if (now <= 0)
            return;

          $("#amount").val(Math.round((now / 100) * maxValue));
        }
      });
  });
});

Answer 2

要将值放在滑块内部，几乎遵循jsfiddle，除了将.ui-slider-handle文本更新放在初始动画中：

$(function() {
    var maxValue = 10000;

    $( "#slider-range-max" ).slider({
      range: "max",
      min: 0,
      max: maxValue,
      step: 100,
      value: 0,
      animate: true,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );

        $(this).find('.ui-slider-handle').text(ui.value);
      },
      change: function( event, ui ) {
        $( "#amount" ).val( ui.value );
      }
    });

    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

    $('.ui-slider-handle')
      .animate({ left: '0%' }, 
      { 
        duration: 1500, 
        easing: 'linear', 
        step: function (now) { 
          if (now <= 0)
          return;

          var currentVal = Math.round((now / 100) * maxValue));

          $("#amount").val(currentVal);
          $(this).text(currentVal);
        }
      })
      .animate({ left: '50%' }, 
      { 
        duration: 1200, 
        easing: 'linear', 
        step: function (now) { 
          if (now <= 0)
            return;

          var currentVal = Math.round((now / 100) * maxValue));

          $("#amount").val(currentVal);
          $(this).text(currentVal);
        }
      })
      .animate({ left: '40%' }, 
      { 
        duration: 1300, 
        easing: 'linear', 
        step: function (now) { 
          if (now <= 0)
            return;

          var currentVal = Math.round((now / 100) * maxValue));

          $("#amount").val(currentVal);
          $(this).text(currentVal);
        }
      });

jQuery UI滑块动画不更新ui值

2 个答案: