使用動畫定義自定義css屬性並更改任何值（）

Question

我試圖在顯示動畫分數的javascript中創建結果屏幕。對於示例中的特定字段，應該在屏幕出現兩秒鐘後的兩秒內將值從0改爲0。由於使用animate()很容易改變css值，所以我認爲我可以將這些值分配給某個自定義css屬性，然後讓元素的值從那裏獲取它。根據this article我只需要將--放置在自定義CSS屬性的前面，this one向我展示瞭如何使用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

試試這個：

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))}});

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

根據我對你的問題的理解，基本上都採用僞myObject和動畫的score屬性應爲您提供所需的效果。而且，我不是使用setTimeout，而是使用delay()。