fadeOut() und slideUp() gleichzeitig?

Question

Ich habe jQuery: FadeOut then SlideUp gefunden und es ist gut, aber es ist nicht die eine.

Wie kann ich fadeOut() und slideUp() gleichzeitig? Ich versuchte zwei separate setTimeout() Anrufe mit der gleichen Verzögerung, aber die slideUp() passiert, sobald die Seite geladen.

Hat jemand das getan?

Answer 1

Sie etwas tun können, ist dies eine vollständige Knie Version:

$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow'); 

Für streng ein fadeout:

$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow'); 

Answer 2

Ich hatte ein ähnliches Problem und reparierte es so.

$('#mydiv').animate({ 
      height: 0, 
     }, { 
      duration: 1000, 
      complete: function(){$('#mydiv').css('display', 'none');} 
     }); 
$('#mydiv').animate({ 
      opacity: 0, 
     }, { 
      duration: 1000, 
      queue: false 
     }); 

die Warteschlange Eigenschaft sagt, ob die Animation in der Warteschlange oder es nur richtig spielt

weg

Answer 3

Direkt Animieren Höhe führt zu einem Ruckeln auf einigen Web-Seiten. Die Kombination eines CSS-Übergangs mit jQuerys slideUp() sorgt jedoch für einen reibungslosen Verschwinden.

function slideFade(elem) { 
    var fade = { opacity: 0, transition: 'opacity 0.5s' }; 
    elem.css(fade).slideUp(); 
    } 

slideFade($('#mySelector')); 

Fiddle mit dem Code:
http://jsfiddle.net/00Lodcqf

Dies ist die Lösung, die ich im dna.js Projekt verwendet, wo Sie den Code anzeigen können (github.com/dnajs/dna.js) als zusätzliche Unterstützung, um zu sehen für Makel und Rückrufe.

Answer 4

Die akzeptierte Antwort von "Nick Craver" ist definitiv der Weg zu gehen. Das einzige, was ich hinzufügen möchte, ist, dass seine Antwort es nicht wirklich "versteckt", was bedeutet, dass das DOM es immer noch als ein brauchbares Element zum Anzeigen sieht.

Dies kann ein Problem sein, wenn Sie Rand oder Padding auf dem Element "slid" haben ... sie werden immer noch angezeigt. Also habe ich nur noch einen Rückruf an Beseeltem() Funktion, um tatsächlich ausblenden nach Animation abgeschlossen ist:

$("#mySelector").animate({ 
    height: 0, 
    opacity: 0, 
    margin: 0, 
    padding: 0 
}, 'slow', function(){ 
    $(this).hide(); 
}); 

Answer 5

Werfen eine weitere Verfeinerung in dort basierend auf @CodeKoalas. Es berücksichtigt den vertikalen Rand und die Füllung, aber nicht horizontal.

$('.selector').animate({ 
    opacity: 0, 
    height: 0, 
    marginTop: 0, 
    marginBottom: 0, 
    paddingTop: 0, 
    paddingBottom: 0 
}, 'slow', function() { 
    $(this).hide(); 
}); 

Answer 6

Es ist möglich, diese sich mit den Methoden slideUp und fadeOut zu tun, wie so:

$('#mydiv').slideUp(300, function(){ 
    console.log('Done!'); 
}).fadeOut({ 
    duration: 300, 
    queue: false 
});