Question

操作方法，

在jQuery中插入下表，

<tr data-value='2.000'>

我需要获取数据值，即2.000，然后将其插值到10.0

var from = {property: 0};
var to = {property: 100};

jQuery(from).animate(to, {
    duration: 100,
    step: function() {
        console.log( 'Currently @ ' + this.property );
    }
});

我想要做的是我有一个通过xml更新的表值，当我等待时，我想播放动画增加值，直到达到目标值或通过aml update提供新值

Answer 1

这可以通过动画其他内容（屏幕外“动画”元素）并对传递给now回调的step值进行一些数学运算并将计算结果戳入{ {1}}感兴趣元素的属性（'pseudoAnimated'元素）。

动画的一个好属性是不透明度，从0到1，因为它提供了一个易于使用的真实data-value值。

HTML：

now

CSS：

<table>
<tr id="pseudoAnimated" data-value="2" data-target="10">
    <td>Hello</td>
</tr>
</table>
<div id="animated">Hidden off-screen</div>

的javascript：

#animated {
    position: absolute;
    left: -1000px;
    top: 0px;
    color: red;
}

见工作fiddle。

在实践中，将计算值戳入pseudoAnimated元素的var $pseudoAnimated = $("#pseudoAnimated"); var $animated = $("#animated").css("opacity", 0); var animData = { start: Number($pseudoAnimated.attr('data-value')), end: Number($pseudoAnimated.attr('data-target')) } $animated.animate({ opacity: 1 }, { duration: 1500, easing: 'linear', step: function(now, fx) { $pseudoAnimated.attr('data-value', animData.start + (animData.end-animData.start) * now); var data = 'data-value: ' + $pseudoAnimated.attr('data-value'); $('body').append('<div>' + data + '</div>'); }, complete: function() { $('body').append('<div>Complete</div>'); } });没有特别的优点，除非其他观察者函数用于监视它。但是这会浪费处理能力，因为data-value回调可以直接对计算值执行任何必要的操作（和/或触发step回调），从而使观察者（和{{1} } attributes）冗余。

如何使用.animate插入两个值

1 个答案: