Jquery inefficient code?

Question

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>

I scrolled about halfway through and then I heard a kitten cry out, from somewhere nearby. — Pointy
– Pointy, Commented Dec 28, 2013 at 23:09
jQuery animations are always a performance hook. The rendering engines of web browsers aren't designed to deal with DOM objects whichs styles change several times per second. — Philipp
– Philipp, Commented Dec 28, 2013 at 23:12
1. You include jQuery three times! 2. Somewhere many many URIError's are thrown that apparently take up a lot CPU calculations to process. — jabbink
– jabbink, Commented Dec 28, 2013 at 23:14
Ever heard of variables? It will increase performance by storing things to memory. — StackSlave
– StackSlave, Commented Dec 28, 2013 at 23:14

Josh Beam · Accepted Answer · 2013-12-29 03:52:40Z

4

}, 1);  // repeat every second

The code above repeats every millisecond.

}, 1000);  // repeat every second

The code above repeats every second, not millisecond.

Also, there are quite a few animation effects happening, which may play into it as well.

edited Dec 29, 2013 at 3:52

answered Dec 28, 2013 at 23:34

Josh Beam

19.9k5 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vim Bonsu · Accepted Answer · 2013-12-30 21:32:18Z

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);

    });

Collectives™ on Stack Overflow

Jquery inefficient code?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related