Значение jQuery Knob обновляется с помощью animate

Question

Значение jQuery Knob обновляется с помощью animate

0

Я пытаюсь создать часы с помощью jQuery ручка. Мои часы работают (http://jsfiddle.net/Misiu/9Whck/1/), но сейчас я пытаюсь добавить некоторые дополнительные функции.
В начале я хочу, чтобы все регуляторы были установлены на 0, а затем с помощью animate я хочу оживить их значение до текущего времени, а затем начать обычное обновление таймера.

Мой код выглядит следующим образом (демо здесь: 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 я должен называть анимацию для каждого регулятора отдельно, но я хотел бы использовать data-targetValue и иметь только один анимат внутри, когда.

Это можно сделать?

Misiu 14 нояб. 2013, в 23:00

Источник

Теги:

javascript

jquery

jquery-knob

1 ответ

Ещё вопросы

Abraham Uribe · Accepted Answer · 2013-11-14T18-55-00.000Z

если вы хотите использовать data-targetValue, вам нужно изменить js, как это

$('.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/
или без.

$.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/

Я пытался с каждым, но безуспешно, спасибо большое!