jQuery旋钮使用动画更新值

问题描述

我正在尝试使用jQuery旋钮来构建时钟.我的时钟正在工作( http://jsfiddle.net/Misiu/9Whck/1/) ，但现在我正尝试向其中添加一些其他功能.
首先，我想将所有旋钮设置为0，然后使用animate将其值设置为当前时间的动画，然后开始正常的计时器更新.

I'm trying to build clock using jQuery Knob.My clock is working (http://jsfiddle.net/Misiu/9Whck/1/), but right now I'm trying to add some extras to it.
At beginning I want to have all knobs set to 0, then using animate I want to animate their value to current time and then start normal timer update.

我的代码如下所示(演示在这里: http://jsfiddle.net/Misiu/cvQED/81/):

My code looks like this (demo here: http://jsfiddle.net/Misiu/cvQED/81/):

$.when(
$('.h').animate({
    value: h
}, {
    duration: 1000,
    easing: 'swing',
    progress: function () {
        $(this).val(Math.round(this.value)).trigger('change');
    }
}),
$('.m').animate({
    value: m
}, {
    duration: 1000,
    easing: 'swing',
    progress: function () {
        $(this).val(Math.round(this.value)).trigger('change');
    }
}),
$('.s').animate({
    value: s
}, {
    duration: 1000,
    easing: 'swing',
    progress: function () {
        $(this).val(Math.round(this.value)).trigger('change');
    }
})).then(function () {
    myDelay();
});

function myDelay() {
    var d = new Date(),
        s = d.getSeconds(),
        m = d.getMinutes(),
        h = d.getHours();
    $('.h').val(h).trigger("change");
    $('.m').val(m).trigger("change");
    $('.s').val(s).trigger("change");
    setTimeout(myDelay, 1000)
}

在when中，我必须分别为每个旋钮调用animate，但是我想使用data-targetValue，并且何时只有一个动画.

In when I must call animate for every knob separately, but I would like to use data-targetValue and to have only one animate inside when.

可以做到吗?

推荐答案

如果要使用data-targetValue，则需要像这样更改js

if you want to use data-targetValue you need to change your js like this

$('.h').data('targetValue', h);//$('.h').attr('targetValue', h);
$('.m').data('targetValue', m);
$('.s').data('targetValue', s);
//...
$.when(
$('.knob').each(function(){//each .knob
    $(this).animate({//animate to data targetValue
        value: $(this).data('targetValue')
    }, {
        duration: 1000,
        easing: 'swing',
        progress: function () {
            $(this).val(Math.round(this.value)).trigger('change')
        }
    });
})
).then(function () {
    myDelay();
});

http://jsfiddle.net/cvQED/83/
或没有.each

http://jsfiddle.net/cvQED/83/
or without .each

$.when(
$('.knob').animate({
    value: 100
}, {
    duration: 1000,
    easing: 'swing',
    progress: function () {
        $(this).val(Math.round(this.value/100*$(this).data('targetValue'))).trigger('change')
    }
})
).then(function () {
    myDelay();
});

http://jsfiddle.net/cvQED/84/

这篇关于jQuery旋钮使用动画更新值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！