Improve performance with this selector and multiple animations

Question

I want to improve the performance of my sites. A site is created with several sections height: 100%; width: 100%, for example, the following assembly (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>

div.examplehidden by default and will be shown with fadeToggleon span.trigger. Now what happens is that on each of the ten divs it div.examplewill disappear.

var start_action = function(){
    //a lot of random actions, for example this one:
    $('.example').stop().fadeToggle();
}

$('span.trigger').click(start_action);

Mobile devices require more performance.

I want to animate only the current div using .section.activeand then switch each other div without using animations (in order to maintain performance).

? start_action start_action_no_animation .section.active, - .section?

var example = $('.example', #fullpage), - $('.section.active).find(example)?

jsfiddle

Answer 1

jQuery , ,
  . , Velocity.js Greensock, . , , CSS (3).

jQuery- CSS, CSS3 transition jQuery, :

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 we will store our visible el,
// so we don't need to run over all our elements
// and sniff for classes:
var $visible = null; 

// (no need to cache .trigger if only used here)
$sections.on("click", ".trigger", function(){
  // Remove from $visible (if not null):
  if($visible) $visible.removeClass("CSS3fadeIn"); 
  // Set a new visible element:
  $visible = $(this).next(".content");
  // Use that $visible one now:
  $visible.addClass("CSS3fadeIn");
});

_{, CSS3 . , , . ( , jQuery ofc, CSS3 ).}

---

, (... ) - :

$(".partyBrakers").remove(); // No need to cache those guys. We don't need them.
// Some fun going on here...

, (, ), .

// Mean You:                    // Computer:
setInterval( letsDance, 800 );  // "OK, let do that dance"
function letsDance() {
  $(".dancer").fadeToggle();    // "Wait, let me find dancers first. ugh.. OK guys, dance."
}

// Good You:                    // Computer:
var $dancers = $(".dancer");    // "Hi guys! Wanna dance?"
setInterval( letsDance, 800 );  // "Let dance!"
function letsDance() {
   $dancers.fadeToggle();       // "You know the move! YEY"
}

.

, , : .
- , , - :

var $danceFloor = $("#danceFloor");
var $dancers    = $danceFloor.find(".dancer"); 
// some party with $dancers here...
// At some point in time some $dancer can become a .tiredDancer
$dancers.on("click", function(){
   $(this).addClass("tiredDancer");
});
// and you meanly want to 
$("#button_kickTiredDancers").on("click", function() {
    $danceFloor.find(".tiredDancer").remove();  // Ohhh... OK, wait let me ask everyone..
});

, , #danceFloor , .tiredDancer.

listOfTiredDancers :

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

push (this) , :

$("#button_kickTiredDancers").on("click", function() {
    $( listOfTiredDancers ).remove();     // YEY! I know already who those are!
});

" , " (, ).

Answer 2

@MarianRick: , , , ".example" , ".trigger". javascript, . ".example", ".trigger".

, , "", DOM. / "".

.section.active. , , , , .

:

$('span.trigger').on('click', function() {
  var trigger_el = $(this);
  trigger_el.parent().siblings('.section').children('.example').hide();
  trigger_el.siblings('.example').fadeToggle();
});

.trigger {
  cursor: pointer;
}
.example {
  display: none;
}
#fullpage {
  height: 100%;
  width: 100%;
  position: relative;
}
.section {
  height: 80px;
  width: 100%;
}
#f01 {
  background-color: red;
}
#f02 {
  background-color: blue;
}
#f03 {
  background-color: green;
}
#f04 {
  background-color: yellow;
}
#f05 {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fullpage">
  <div class="section" 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 class="section active" id="f03">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
  <div class="section" id="f04">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
  <div class="section" id="f05">
    <span class="trigger">Button</span>
    <div class="example">Content</div>
  </div>
</div>

Hide result