我之前已经问过类似的问题,但答案对我没有帮助,因为它们对我和我的简单动画来说太先进了。我正处于javascript的最开始。在我的网站上,我有一个简单的代码,用于将元素从一个posotion移动到另一个posotion。我希望它在到达最终位置时消失,不会消失,只是突然消失。我应该用不透明度改变吗?我怎么写呢?我的代码如下。
function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
var id = setInterval(frame, 5);
function frame() {
if (pos == 380) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
答案 0 :(得分:0)
要隐藏元素,只需将style.display设置为“none”即可。
例如:
function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
var id = setInterval(frame, 5);
function frame() {
if (pos == 380) {
clearInterval(id);
// this is the key line
elem.style.display = 'none';
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
就像抬头一样,使用链式setTimeouts比在HTML动画中使用setInterval更好。原因是如果动画(和/或页面上的其他脚本)花费的时间长于浏览器将无响应的时间间隔。使用setTimeouts链,时钟在当前帧结束之前不会开始计时。
例如,你可以这样做:
function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
function frame() {
if (pos == 380) {
// this is the key line
elem.style.display = 'none';
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
// set a timeout for 5 ms
setTimeout(myMove, 5);
}
}