有人可以指出这段代码效率低下吗？在我的html网站http://dev1.envisionwebdesign.co/johnreid/campaign.html上运行此代码时，我的CPU使用率很高。动画也不流畅。我已将此脚本放在我的页面中。这也是一个原因吗？
<script>
$(document).ready(function() {
$("#copy2").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav2").animate({'position':'absolute','top':'380px',opacity:1},1);
$("#copy3").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav3").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy4").animate({'position':'absolute','top':'-380px',opacity:1},1);
$(".media-nav4").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy5").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav5").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy6").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav6").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy7").animate({'position':'absolute','top':'10px',opacity:1},1);
$(".media-nav7").animate({'position':'absolute','margin-top':'450px',opacity:1},1);
$("#copy8").animate({'position':'absolute','top':'10px',opacity:1},1);
$(".media-nav8").animate({'position':'absolute','margin-top':'450px',opacity:1},1);
$("#copy9").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav9").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy10").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav10").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy11").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav11").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy12").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav12").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy13").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav13").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy14").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav14").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy15").animate({'position':'absolute','top':'-390px',opacity:1},1);
$(".media-nav15").animate({'position':'absolute','top':'400px',opacity:1},1);
$("#copy16").animate({'position':'absolute','top':'10px',opacity:1},1);
//$(".media-nav16").animate({'position':'absolute','top':'400px',opacity:1},1);
$(function() {
setInterval(function() {
$("#copy2") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav2") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy3") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav3") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy4") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav4") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy5") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav5") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy6") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav6") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy7") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$(".media-nav7") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','margin-top':'250px',opacity:1},1700);
$("#copy8") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$(".media-nav8") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','margin-top':'250px',opacity:1},1700);
$("#copy9") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav9") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy10") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav10") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy11") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav11") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy12") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav12") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy13") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav13") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy14") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav14") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy15") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'0px',opacity:1},1700);
$(".media-nav15") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
$("#copy16") // get all <h2>s // reset their background colours
.filter(":onScreen") // get only <h2>s on screen
.animate({'position':'absolute','top':'250px',opacity:1},1700);
}, 1); // repeat every second
});
});
</script>
答案 0 :(得分：4)
}, 1); // repeat every second
上面的代码重复每毫秒。
}, 1000); // repeat every second
上面的代码重复每秒，而不是毫秒。
此外，还会发生很多动画效果，也可能会发挥作用。
答案 1 :(得分：0)
感谢您的输入人员。这对我有用。如果无论如何都要改进此代码，请告诉我。
$(document).ready(function () {
setInterval(function () {
$('[id^="copy"]').each(function () {
currentCopyID = $(this).attr('id');
currentID = currentCopyID.substring(4, currentCopyID.length);
if (!$(this).visible(true)) {
$(this).transition({ 'position': 'absolute', 'top': '-380px', opacity: 1 }, 1);
$(".media-nav" + currentID).transition({ 'position': 'absolute', 'top': '380px', opacity: 1 }, 1);
}
else {
$(this).filter(":onScreen").transition({ 'position': 'absolute', 'top': '0px', opacity: 1 }, 1700);
$(".media-nav" + currentID).filter(":onScreen").transition({ 'position': 'absolute', 'top': '250px', opacity: 1 }, 1700);
}
});
}, 1150);
});