javascript - Defining custom css attributes and changing any value with animate() -


i'm trying make result screen in javascript displays animated scores. specific field in example it's supposed go value 0 in 2 seconds, 2 seconds after screen appears. since it's easy change css values animate() thought assign values custom css property, have element's value take there. according this article have place -- in front of custom css attributes , this one shows me how use animate() method. tried doing this

$elementsuccess.css('--value', scoreplus); 

and turns out --value's value undefined. when display scoreplus somewhere appears, it's defined. there way define custom value?

here entire code element. there errors if custom attribute defined correctly?

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

try this:

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>

based on understanding of problem, using pseudo myobject , animating score property should provide desired effect. also, instead of settimeout, resorted using delay().


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -