Zanikanie i przesuwanie w tym samym czasie?

Question

Mam następujący skrypt, który działa dobrze:

$(that).parents(".portlet").fadeOut('slow', function() { 
    $(that).parents(".portlet").remove(); 
}); 

To po prostu znika element, a następnie usuwa je całkowicie z ekranu.

Chcę nieznacznie poprawić efekt, przesuwając go w górę, gdy zanika. Jak to zrobić?

Po to, by wyjaśnić, nie chcę, żeby to zniknęło THEN przesuń się, albo przesuń w górę TO ZMNIEJSZĘ, chciałbym, żeby to zniknęło, I jednocześnie, podczas gdy zanika, chciałbym to się podsunie.

Answer 1

$(that) 
    .parents(".portlet") 
    .animate({height: 0, opacity: 0}, 'slow', function() { 
     $(this).remove(); 
    }); 

Answer 2

co:

$('#clickme').click(function() { 
    $('#book').animate({ 
    opacity: 0, 
    height: '0' 
    }, 5000, function() { 
    // Animation complete. 
    }); 
}); 

trafi do opacque 0 i wysokość 0.

Dowiedz się więcej tutaj:

Answer 3

można użyć .animate funkcję jQuery

możesz ustawić dowolną liczbę animacji.

wprost krycie jako parametr & również slideUp jako parametr

api.jquery.com/animate/

Answer 4

Można wykorzystać .animate().

$(that).parents(".portlet").animate({ 
    opacity: 0, 
    height: 0 
}, 'slow', 'linear', function() { 
    $(that).parents(".portlet").remove(); 
}); 

Answer 5

z jQuery .animate() można manipulować wiele właściwości naraz - patrz demo

Answer 6

Aby uniknąć skoki efekt nie zapomnij o dopełnienie & margines. Zespół jQuery nie używa właściwości 0. Zamiast tego używają wartości "ukryj" & "pokaż". na przykład

$('#elementId').animate({ 
      opacity: 'hide',  // animate slideUp 
      margin: 'hide', 
      padding: 'hide', 
      height: 'hide'  // animate fadeOut 
     }, 'slow', 'linear', function() { 
      $(this).remove(); 
     });