用于动画和更新 div 的 ui 滑块

Question

我正在尝试让时间线图工作，但我很挣扎，我不知道如何将动画插入代码并让滑块句柄从左到右播放并同时更新 div，任何想法都非常欢迎:)

demo here

JS

$('#slider').slider({
    value: 0,
    min: 1,
    max: 100,
    slide: handleSliderChange
});

function handleSliderChange(event, slider) {
    $('#vardiv').css('height', 150 - slider.value / 100 * 50);
    $('#vardiv1').css('height', slider.value / 100 * 90);
    $('#vardiv2').css('height', slider.value / 100 * 20);
    $('#vardiv3').css('height', 100 - slider.value / 100 * 40);
    $('#vardiv4').css('height', slider.value / 100 * 70);


}

HTML

<h1>Health Benefits</h1>

<div id="slider"></div>
<div id="container">
    <div id="vardiv"></div>
    <div id="vardiv1"></div>
    <div id="vardiv2"></div>
    <div id="vardiv3"></div>
    <div id="vardiv4"></div>
</div>

Answer 1

花了一些时间，但成功了！ :)

DEMO

JS：

$("#slider").slider({
    value: 0,
    max: 100,
    min: 100
});

function handleSliderChange(event, slider) {
    $('#vardiv').css('height', 150 - slider.value / 100 * 50);
    $('#vardiv1').css('height', slider.value / 100 * 90);
    $('#vardiv2').css('height', slider.value / 100 * 20);
    $('#vardiv3').css('height', 100 - slider.value / 100 * 40);
    $('#vardiv4').css('height', slider.value / 100 * 70);
}

var val = 0,
    bool = true; // indicates whether to increase value (true) or decrease (false)

// Replicates the slider parameter in the `handleSliderChange` function
var obj = {
    value: val,
    max: 100,
    min: 0
};

// Every second
setInterval(function () {

    // Call the default function
    $("#slider").slider(obj);

    // Perform the bool checks
    if(bool !== null){
        if (bool)
            val += 10;
        else
            val -= 10;
    }

    // Boundary check: if crossed boundary, reverse irection (bool)
    if(bool !== null && val === 100){
        var answer = confirm("Continue animating?");
        bool = answer ? false : null;
    }else if (bool !== null && (val >= 100 || val <= 0)){
        bool = !bool;
    }

    if(bool !== null){
        obj.value = val;
        // Event is unused hence no harm in leaving undefined
        handleSliderChange(undefined, obj);
    }

}, 1000);