Question

我有下面的代码，我希望一旦将对象悬停在外，数字会重新计算为0％。此外，我无法确定如何使值在负载时再次消失。你能帮我解决一下吗？

提前致谢。

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/

Answer 1

<强> jsBin demo

CSS ：将overflow: hidden设置为.fill，以防止动画结束后文字可见。

HTML ：从数据属性中删除%

JS ，你走了。所有你需要的：

$('.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) + '%') ;     
    }
  });
});

另请注意使用.stop()方法，如果您多次歇斯底里地悬停它:)它会阻止无尽的动画。

使用JQuery计算回百分比

1 个答案: