1
我有下面的代码,我希望数字回到0%,一旦悬停对象。另外,我无法确定如何让这个值在加载时再次消失。你能帮我解决这个问题吗?使用JQuery计数返回百分比
在此先感谢。
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);
});
});
的jsfiddlehttp://jsfiddle.net/zp8pe069/
非常感谢!完美的作品! :) – 2014-12-08 01:33:49
@EmilGurbanov;)不客气! – 2014-12-08 01:34:30