jQuery效率低下的代码? [英] Jquery inefficient code?
本文介绍了jQuery效率低下的代码?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人可以指出这段代码的效率低下吗?在html网站 http://dev1.envisionwebdesign.co/上运行此代码时，CPU使用率很高johnreid/campaign.html .而且动画也不流畅.我已将此脚本放在页面的中.那也是原因吗?
Can someone please point out the inefficiency in this code? I get high CPU usage when running this code on my html website http://dev1.envisionwebdesign.co/johnreid/campaign.html. Also the animation isn't smooth. I have placed this script in the of my page. Is that also a reason why?
<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>
推荐答案
感谢您的投入.这对我有用.如果有任何方法可以改进此代码，请告诉我.
Thanks for your input guys. This worked for me. If there's anyway to improve this code, let me know.
$(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);
});
这篇关于jQuery效率低下的代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
