CODEWITHSUNDEEP
javascriptjqueryhtmlcss
egurb
egurb

Reputation: 1216

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.

Thanks in advance.

HTML

<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>

CSS

.container {
    position: relative;
    width: 300px;
    height: 30px;
    background-color: blue;
    margin: 10px auto;
}

.fill {
    height: 100%;
    width: 0;
    background-color: red;
    line-height: 30px;
    text-align: left;
    z-index: 1;
    text-align: right;
}

JQuery

$(function() {
   $('.container').hover( function(){
      var width=$(this).find(".fill").data('width');
      $(this).find(".fill").animate({ width: width }, {
        duration:800,
        step: function(now, fx) {
                $(this).html(Math.round(now) + '%');     
        }
    });
   },
   function(){
      $(this).find(".fill").animate({ "width": "0px" }, 800);
    });
});

jsFiddle http://jsfiddle.net/zp8pe069/

Upvotes: 1

Views: 464

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

jsBin demo

CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.

HTML: remove % from the data attribute

JS and here you go. all you need:

$('.container').hover(function( e ){
  var $fill = $(this).find(".fill");
  var width = $fill.data('width');
  $fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
    duration : 800,
    step : function(now) {
      $(this).html(Math.round(now) + '%') ;     
    }
  });
});

Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

Upvotes: 1

Related Questions