当动态变化宽度闪烁时
问题描述:
我想动态地改变元素的宽度。我有工作代码,但它有时闪烁。任何想法,为什么?当动态变化宽度闪烁时
JS:
var counter = 0;
setInterval(function() {
counter = (counter + 1) % 100;
$(".xxx").css("width", counter + "%");
}, 40);
CSS:
.xxx {
max-width: 70px;
height: 3px;
width: 0%;
background-color: orange;
}
答
也就是说它是如何去看看,如果你尝试一次递增1%。而是使用jquery动画,以获得更好的过渡
DEMO:http://plnkr.co/edit/8OsVuRJGCLQsJWfrlzJ4
var counter =0;
setInterval(function() {
counter = (counter + 1) % 100;
$(".xxx").animate({width:counter+'px'});
}, 40);
答
如果你想达到一个70像素宽当它到达100%,你需要添加一个div家长.XXX
这样的:
<div class="yyy">
<div class="xxx"></div>
</div>
<p id="text"></p>
CSS:
.xxx{
height: 3px;
width: 0%;
background-color: orange;
}
.yyy{
width: 70px;
}
你闪烁的意思是什么?它重新启动? – 2014-09-02 19:14:06
我看到两件事情可能是你所描述的闪烁。首先,将最大宽度设置为70,如果宽度超过100%,宽度将在70px处“暂停”。如果是因为宽度从100%跳到0,那么您需要调整代码来反转计数器,而不是模数。 – mowwwalker 2014-09-02 19:18:50