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
Post a Comment