我有这辆车在休息时旅行。我想要下面这个:
1)它应该驱动到页面的右侧
2)当它到达750位置左侧时,它必须停止。
3) 暂停 5 秒
4) 暂停后,它必须将自己定位到页面的左侧。
5)然后重新开始驾驶。
http://jsfiddle.net/mjTgB/6/
$(document).ready(function () {
var showcar;
showcar = setInterval(function () {
var difference = $(".car").position().left
if (difference < 750)
{
$('.car').css("left", "+=2px");
}
else
{
clearInterval(showcar);
setTimeout(function()
{
$('.car').css("left", "-=700px");
//want to re-start the interval
},5000);
}
}, 10);
});
var showcar;
STARTZOOM();
function STARTZOOM() {
showcar = setInterval(CARZOOM, 10);
}
function CARZOOM() {
var difference = $(".car").position().left
if (difference < 750) {
$('.car').css("left", "+=2px");
} else {
clearInterval(showcar);
setTimeout(function () {
$('.car').css("left", "-=700px");
STARTZOOM();
}, 5000);
}
}
就像我在聊天中提到的,您只需以与最初调用它相同的方式重新启动间隔,但使用命名函数代替 anon 函数。我已经将"重启"放入其自己的函数中以减少代码重复。注意:我的函数名称故意不好。
一种快速的解决方案是将现有的.ready()
函数放在变量中,以便在运行结束时重新执行。
这样:
$(document).ready(function() {
var run = function () {
var showcar;
showcar = setInterval(function () {
var difference = $(".car").position().left
if (difference < 750)
{
$('.car').css("left", "+=2px");
}
else
{
clearInterval(showcar);
setTimeout(function()
{
$('.car').css("left", "-=700px");
run();
},5000);
}
}, 10);
}
run();
});
http://jsfiddle.net/WGJ9g/1/
您应该将处理程序与间隔分开,以便可以重复使用它。
演示:http://jsfiddle.net/mjTgB/10/
var showcar, interval;
showcar = function () {
var difference = $(".car").position().left;
if (difference < 750) {
$('.car').css("left", "+=2px");
} else {
clearInterval(interval); // Clear the interval
setTimeout(function () {
$('.car').css("left", "-=700px");
interval = setInterval(showcar, 10); // Re-assign the interval
}, 5000);
}
};
interval = setInterval(showcar, 10); // Initialize
你必须将间隔放在一个函数中并调用该函数
var showcar;
function myInterval() {
showcar = setInterval(function () {
...
if (...) {
...
} else {
clearInterval(showcar);
setTimeout(function() {
...
myInterval();
},5000);
}
}, 10);
}
myInterval();
据我了解,您希望汽车快速返回起点并继续循环向右行驶的动画。
这是一个经过测试的工作解决方案,在此jsFiddle上可用:
$(document).ready(function () {
var showcar;
function startAnimation() {
showcar = setInterval(function () {
console.log(
'position: '
+ $('.car').css("left"));
var difference = $(".car").position().left;
if (difference < 750) {
$('.car').css("left", "+=2px");
} else {
$('.car').css("left", "-=700px");
}
}, 10);
}
startAnimation();
});
*我添加了该职位的控制台日志,以帮助了解正在发生的事情。
如果您希望汽车继续返回其原始位置并再次向右行驶,则无需clearInterval()
,您只需将左设置为像这样0px
$(document).ready(function () {
var showcar;
showcar = setInterval(function () {
var difference = $(".car").position().left
if (difference < 750)
{
$('.car').css("left", "+=2px");
}
else
{
//clearInterval(showcar);
$('.car').css("left", "0px");
}
}, 10);
});
演示;)