, fügen Klasse und die Änderungen an beiden spielen sich> nicht funktioniert

Question

Dieses jsfiddle Beispiel mehr erklären kann, oder weniger, was ich meine Click here

Dies ist meine eigentliche Code

JS

loadMore : function(){ 
     var limit = initial_rows+1; //initial_rows begin being 2 
     var number_of_rows_to_append = initial_rows+2; // 4 
     $card.css('height', $card.find('.title-box').height() + number_of_rows_to_append * 70); //update card height 
     for(var i = initial_rows; i<=limit; i++){ 
      $(template(content[i])).appendTo($contentJQuery); 
     } 
     $contentJQuery.find('.normal-box').slice(-2).addClass('show'); 
     initial_rows+=2; 
     } 
    }, 

CSS

.normal-box{ /*Container of other tiny boxes*/ 
    height: 70px; 
    border-bottom: 1px solid; 
    border-bottom-color: gainsboro; 
    overflow: hidden; 
    opacity: 0; 
    transition: opacity 0.5s ease 0.5s; 
} 
.normal-box.show{ 
    opacity: 1; 
} 

HTML

<div class="card"> 
    <div class="content"> 
    <div class="normal-box"> 
    </div> 
    <div class="normal-box"> 
    </div> 
    <div class="normal-box"> 
    </div> 
    <div class="normal-box"> 
    </div> 
    </div> 
</div> 

Grundsätzlich gibt es eine Funktion, die die Karte und hängt nur 2 normale Kästen am Anfang erzeugt (es Opazität wird auf 1 gesetzt automatisch). Wenn die Funktion loadMore() ausgelöst wird, müssen zwei weitere Zeilen mit dem Opazitätsübergang angehängt werden, wie im Beispiel für jsfiddle gezeigt (in meinem Fall erscheinen die Zeilen, in der Datei verschwinden sie). Der Übergang besteht darin, dass die Karte größer wird (deshalb wird die Kartenhöhe aktualisiert) mit einem Leerzeichen, dann erscheinen die 2 letzten Normal-Felder mit dem Übergang

Das Problem ist, dass in meinem Fall die letzte Zeile ohne Übergang erscheint und die Vorletzter erscheint mit Übergang, keine Ahnung warum. Jede Hilfe wird

Answer 1

Aktualisiert Fiddle geschätzt werden:

Vielleicht ist dies, was Sie bestimmt:

revised jsFiddle

$('.btn').on('click', function(){ 
    $('li').each(function(){ 
     var txt = $(this).text().slice(0,-2); //or .slice(-1) ? 
     $(this).text(txt).addClass('change'); 
    }); 
});