jQuery fade runter ohne Containerraum zu verlieren

Question

Ich habe 3 cards horizontal aufgereiht und schiebe sie nach unten und verblasse sie gleichzeitig. Was ich als nächstes tun möchte, ist, den Platz auf der Seite nach der Animation zu behalten. Ich weiß, dass css('visibility','hidden') das Element nicht aus dem Dokument entfernt, aber wenn ich diese Eigenschaft nach der Animation anwenden, ist es zu spät.

Ich versuchte, die ursprüngliche Breite und Höhe der card zu speichern und sie nach der Animation mit .css() erneut anzuwenden und das hat nicht funktioniert.

HTML

<div class="row center"> 
        <div id="card1" class="col s4"> 
         <div class="card blue-grey lighten-2"> 
          <div class="card-content white-text center"> 
           <span class="card-title">Card 1</span> 

          </div> 
         </div> 
        </div> 
        <div class="col s4"> 
         <div class="card blue-grey lighten-2"> 
          <div class="card-content white-text center"> 
           <span class="card-title">Card 2</span> 

          </div> 
         </div> 
        </div> 
        <div class="col s4"> 
         <div class="card blue-grey lighten-2"> 
          <div class="card-content white-text center"> 
           <span class="card-title">Card 3</span> 

          </div> 
         </div> 
        </div> 
       </div> 

jQuery

$("#card1") 
    .css('opacity', 1) 
    .css('visibility','hidden') 
    .animate({ 
     opacity: 0, 
     marginTop: $("#card1").height(), 
     height: "toggle", 
    }, 2500, function() { 
     //when animation is done 
    }); 

jsfiddle

Answer 1

können Sie transform: translate() anstelle von margin und height Makeln. Sie können auch alles in CSS animieren, indem Sie eine Klasse in JS anwenden.

$("#card1") 
 
     .addClass('ready');

#card1 { 
 
    transition: opacity 2.5s, transform 2.5s; 
 
} 
 
.ready { 
 
    opacity: 0; 
 
    transform: translateY(100%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row center"> 
 
        <div id="card1" class="col s4"> 
 
         <div class="card blue-grey lighten-2"> 
 
          <div class="card-content white-text center"> 
 
           <span class="card-title">Card 1</span> 
 
           
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="col s4"> 
 
         <div class="card blue-grey lighten-2"> 
 
          <div class="card-content white-text center"> 
 
           <span class="card-title">Card 2</span> 
 
           
 
          </div> 
 
         </div> 
 
        </div> 
 
        <div class="col s4"> 
 
         <div class="card blue-grey lighten-2"> 
 
          <div class="card-content white-text center"> 
 
           <span class="card-title">Card 3</span> 
 
           
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div>

jsfiddle

Answer 2

Es versteckt, weil ein display: none Styling ihm hinzugefügt wird, nachdem die Animation erfolgt. Ich glaube nicht, in der Regel wie !important verwenden, aber das Hinzufügen einige einfache Styling es fest auf:

https://jsfiddle.net/00wswmqb/1/