jQuery淡入淡出而不會丟失容器空間

我有3 cards水平排列，並將它們向下滑動並同時褪色。接下來我想要做的是在動畫之後保留頁面上的空間。我知道css('visibility','hidden')不會從文檔中刪除元素，但如果在動畫之後應用此屬性，則爲時已晚。jQuery淡入淡出而不會丟失容器空間

我嘗試保存card的原始寬度和高度，並在動畫後使用.css()重新應用它們，但這不起作用。

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

來源

2017-01-24 Jordan.J.D

可以使用transform: translate()代替margin和切換height。您還可以通過在JS中應用一個類來爲CSS中的所有內容製作動畫。

$("#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

來源

2017-01-24 01:00:23

叉形我的jsfiddle並把它放在你的答案，似乎運作良好（運行在堆棧的代碼片段沒有顯示什麼你要）。我打算玩一下，以確保它完全回答我的問題。謝謝！ –