javascript - Improve performance with this selector and multiple animations -

i want improve sites performance. site build multiple height: 100%; width: 100% sections, example following build (multiplied ten times):

<div id="fullpage">     <div class="section active" id="f01">         <span class="trigger">button</span>         <div class="example">content</div>     </div>     <div class="section" id="f02">         <span class="trigger">button</span>         <div class="example">content</div>     </div> </div> 

the div.example hidden default, , shown using fadetoggle on span.trigger. happens on every of ten divs div.example faded in.

var start_action = function(){     //a lot of random actions, example one:     $('.example').stop().fadetoggle(); }  $('span.trigger').click(start_action); 

this needs lot of performance on mobile devices.

i want animate current div using .section.active , afterwards toggle every other div without using animations (to save performance).

what fastest , cleanest way this? have create 2 functions start_action , start_action_no_animation , fire 1 @ .section.active , other 1 @ other .section?

if cache selectors var example = $('.example', #fullpage) can combine cached selector $('.section.active).find(example)?

check jsfiddle

jquery lot of work behind scenes in animation vast majority of browsers, but
not good @ animations. libraries velocity.js , greensock are, good browsers , fast machines. roughly, browsers enough if exploit css(3) animations capabilities.

so instead of using jquery animation methods, could use css classes, css3 transition, , jquery toggle element's class:

jsbin demo

.section {height: 80px;} .trigger {cursor: pointer;} .content { opacity: 0; transition: opacity 1s; } .css3fadein{opacity: 1;} 

// cache: var $fullpage = $("#fullpage"); var $sections = $fullpage.find(".section"); var $content  = $sections.find(".content");  // store (temporary): // inside $visible store our visible el, // don't need run on our elements // , sniff classes: var $visible = null;   // (no need cache .trigger if used here) $sections.on("click", ".trigger", function(){   // remove $visible (if not null):   if($visible) $visible.removeclass("css3fadein");    // set new visible element:   $visible = $(this).next(".content");   // use $visible 1 now:   $visible.addclass("css3fadein"); }); 

_{note above i've used css3 transition on opacity. might want whatever need. (test using different animation libraries, jquery ofc, css3, , on different devices).}

---

caching selectors means in performance if have plans reuse same selectors again (...and again) somewhere in code:

$(".partybrakers").remove(); // no need cache guys. don't need them. // fun going on here... 

caching selectors improves speed specially when have functions running (like in loop) recalling same elements.

// mean you:                    // computer: setinterval( letsdance, 800 );  // "ok, let's dance" function letsdance() {   $(".dancer").fadetoggle();    // "wait, let me find dancers first. ugh.. ok guys, dance." } 

// you:                    // computer: var $dancers = $(".dancer");    // "hi guys! wanna dance?" setinterval( letsdance, 800 );  // "let's dance!" function letsdance() {    $dancers.fadetoggle();       // "you know move! yey" } 

you got point.

by adding dynamic elements adding mutable selectors classes, there's 2 ways, slower way , faster way.
slow way when assign class i.e. clicked element, , @ point want recall elements:

var $dancefloor = $("#dancefloor"); var $dancers    = $dancefloor.find(".dancer");  // party $dancers here... // @ point in time $dancer can become .tireddancer $dancers.on("click", function(){    $(this).addclass("tireddancer"); }); // , meanly want  $("#button_kicktireddancers").on("click", function() {     $dancefloor.find(".tireddancer").remove();  // ohhh... ok, wait let me ask everyone.. }); 

above, if cached guys, still need go find on #dancefloor dancer .tireddancer.

the faster way have listoftireddancers array, , put selected elements in it:

var listoftireddancers = []; // ... $dancers.on("click", function(){    listoftireddancers.push( ); }); 

you push tired element object (this) array list, , when needed act on list instead:

$("#button_kicktireddancers").on("click", function() {     $( listoftireddancers ).remove();     // yey! know are! }); 

preventing "go find ones in document object model" (specially if have huge number of elements).