Question

我试图在javascript中创建一个显示动画分数的结果屏幕。对于示例中的特定字段，它应该在屏幕出现两秒后的两秒内从值变为0。由于使用animate()很容易更改css值，我认为我可以将值分配给某些自定义css属性，然后让元素的值从那里获取。根据{{3}}，我只需将--放在自定义css属性前面，this article向我展示如何使用animate()方法。所以我试着这样做

$elementSuccess.css('--value', scorePlus);

结果--value的值为undefined。当我在某个地方显示scorePlus时，它就被定义了。还有另一种定义自定义值的方法吗？

以下是此元素的完整代码。如果正确定义了自定义属性，它会有任何错误吗？

$elementSuccess.html(scorePlus);
$elementSuccess.css('--value', scorePlus);
setTimeout(function(){
    $elementSuccess.animate({
            '--value': 0
        },
        {
            duration: 2000,
            progress: function(){
                $elementSuccess.html(Math.round($elementSuccess.css('--value')));
            }
        }
    );
},2000);

Answer 1

试试这个：

＆＃13;

var scorePlus=100;
var $elementSuccess=$('.success');
var myObject = {score:scorePlus};
$elementSuccess.html(scorePlus);
$(myObject).delay(2000).animate({score:0},{duration:2000,progress:function(){$elementSuccess.html(Math.round(myObject.score))}});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="success"></div>

＆＃13;

根据我对您的问题的理解，基本上使用伪myObject并为其score属性设置动画应为您提供所需的效果。另外，我使用delay()而不是setTimeout。

定义自定义css属性并使用animate（）更改任何值

1 个答案: