我在学校的作业上遇到了一些问题。无论如何,当我使用startInterval时,我分配和intervalID,这样我就可以稍后清除interval。不幸的是,当你按下"停止这种疯狂"按钮时,它并不清楚。有人知道为什么吗?
(如果你想知道所有的背景颜色的东西,我使用了一个jquery插件,我没有添加到这个片段)
var intervalID;
$('.gal').click(function() {
var photoID = jQuery(this).attr("id");
alert(alerts[photoID]);
});
var alerts = {
//row one
"1:1": "This animal is a penguin!",
"1:2": "This animal is a lion!",
"1:3": "This animal is a cat!",
"1:4": "This animal is a giraffe!",
//row two
"2:1": "Cool looking ancient building!",
"2:2": "Cool looking modern building!",
"2:3": "Cool building from dubai!",
"2:4": "Cool building by the water!"
};
$("#stop").click(function() {
clearInterval(intervalID);
});
$(window).load(function() {
animate();
});
function animate() {
intervalID = setInterval(function() {
var width = 25;
$(".gal").animate({
'marginLeft': '-=25px'
});
$(".gal").animate({
'marginLeft': '+=25px'
});
$("#title").animate({
'marginLeft': '+=' + width + 'px'
}, "slow");
$("#title").animate({
'marginLeft': '-=' + width + 'px'
}, "slow");
$("body").animate({
'backgroundColor': 'lightyellow'
}, 1000);
$("body").animate({
'backgroundColor': 'yellow'
}, 1000);
$("body").animate({
'backgroundColor': 'orange'
}, 1000);
$("body").animate({
'backgroundColor': 'red'
}, 1000);
$("body").animate({
'backgroundColor': 'lightpink'
}, 1000);
$("body").animate({
'backgroundColor': 'pink'
}, 1000);
$("body").animate({
'backgroundColor': 'purple'
}, 1000);
$("body").animate({
'backgroundColor': 'blue'
}, 1000);
$("body").animate({
'backgroundColor': 'lightblue'
}, 1000);
$("body").animate({
'backgroundColor': 'cyan'
}, 1000);
$("body").animate({
'backgroundColor': 'green'
}, 1000);
$("body").animate({
'backgroundColor': 'lightgreen'
}, 1000);
}, 0.1);
}
body {
background-color: lightyellow;
}
#title {
display: block;
/*position:absolute;*/
}
.gal {
display: block;
margin: 20px;
width: 250px;
height: 200px;
border: 5px solid black;
}
#stop {
position: fixed;
bottom: 0;
right: 0;
border: 3px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Functions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="container-fluid">
<button id="stop" class="btn-warning">Stop This Madness!</button>
<h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1>
<div class="row">
<div class="col-md-3">
<img id="1:1" src="http://ngm.nationalgeographic.com/2012/11/emperor-penguins/img/02-airborne-penguin-exits-water_1600.jpg" class="gal">
</div>
<div class="col-md-3">
<img id="1:2" src="http://efdreams.com/data_images/dreams/lion/lion-03.jpg" class="gal">
</div>
<div class="col-md-3">
<img id="1:3" src="https://s3.graphiq.com/sites/default/files/stories/t2/tiny_cat_12573_8950.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="1:4" src="https://upload.wikimedia.org/wikipedia/commons/0/02/Giraffe_Ithala_KZN_South_Africa_Luca_Galuzzi_2004.JPG" class="gal">
</div>
</div>
<div class="row">
<div class="col-md-3">
<img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" />
</div>
<div class="col-md-3">
<img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal">
</div>
</div>
</div>
<script></script>
<script src="script.js"></script>
</body>
</html>
有两点你需要知道:
-
setInterval()
的延迟以毫秒为单位指定,并且您已经指定了0.1
的延迟-这意味着您已经尝试将您的函数调度为每秒运行10,000次。在实践中,JS不会让你低于5ms:任何指定的更短的延迟都将四舍五入,但仍然意味着你的函数将每秒运行大约200次。 -
当你在同一元素上多次调用
.animate()
时,就像你在.gal
,#title
和body
上做的那样,它会排队等待在当前动画完成后运行的额外动画。
把这两点放在一起,你的代码每5毫秒向队列添加多个动画,每个动画花费的时间都比5毫秒长得多。所以当你调用clearInterval()
时,你已经有大量的动画在排队,它们需要很长时间才能完成。
你可以停止当前正在进行的动画,并使用.stop()
方法清除给定元素的动画队列:
$(".gal").stop(true);
但是尝试使用setInterval()
管理正在进行的动画总是会有点笨拙,特别是当你有多个动画与不同的时间指定。但幸运的是,.animate()
方法允许您提供一个回调函数,该函数将在动画完成后运行,因此您可以从那里调度额外的处理。
您在评论中询问是否有更有效的方法来管理动画:对于所有这些颜色变化,我建议使用数组,然后当当前颜色变化完成时再次调用.animate()
为数组中的下一个颜色。
所以可能像下面这样,注意我已经删除了一些与动画无关的代码,以便使这个答案更短一些,并且我已经将动画代码分成三个函数,以便您更清楚地了解每个函数的作用:
$("#stop").click(function() {
$(".gal, #title, body").stop(true);
});
$(window).load(function() {
animateGallery();
animateTitle();
animateBody();
});
function animateGallery() {
$(".gal").animate({
'marginLeft': '-=25px'
}, "slow").animate({
'marginLeft': '+=25px'
}, "slow", animateGallery); // note the function set as final argument
// - it will be called when animation finishes
}
function animateTitle() {
var width = 25;
$("#title").animate({
'marginLeft': '+=' + width + 'px'
}, "slow").animate({
'marginLeft': '-=' + width + 'px'
}, "slow", animateTitle); // note the function set as final argument
}
var colors = ['lightyellow', 'yellow', 'orange', 'red', 'lightpink', 'pink', 'purple', 'blue', 'lightblue', 'cyan', 'green', 'lightgreen'];
var currentColor = 0;
function animateBody() {
$("body").animate({
'backgroundColor': colors[currentColor]
}, 1000, animateBody); // note the function set as final argument
currentColor = (currentColor + 1) % colors.length;
}
#title { display: block; }
.gal { display: block; margin: 20px; width: 250px; height: 200px; border: 5px solid black; }
#stop { position: fixed; z-index: 100; bottom: 0; right: 0; border: 3px solid red; }
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Functions</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
</head>
<body>
<div class="container-fluid">
<button id="stop" class="btn-warning">Stop This Madness!</button>
<h1 id="title" style="margin-left: 20px;" class="text-primary">Image Gallery:</h1>
<div class="row">
<div class="col-md-3">
<img id="2:1" src="http://cdn.mos.cms.futurecdn.net/78b7453e70727aae7eed989ff2cee83d.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:2" src="http://thegrumpyoldlimey.com/images/buildings/dome_feature.jpg" class="gal" />
</div>
<div class="col-md-3">
<img id="2:3" src="https://d3dupjkkwlat3o.cloudfront.net/399433011453/2071971/576xN?1410992818" class="gal" />
</div>
<div class="col-md-3">
<img id="2:4" src="http://www.jazzhostels.com/blog/wp-content/uploads/2014/09/hemispheric-photo-valencia-spain-cc.jpg" class="gal">
</div>
</div>
</div>
</body>
</html>