fadeOut() et slideUp() en même temps?

Question

J'ai trouvé jQuery: FadeOut then SlideUp et c'est bon, mais ce n'est pas le cas. Comment puis-je fadeOut() et slideUp() en même temps? J'ai essayé deux appels setTimeout() séparés avec le même délai, mais le slideUp() est arrivé dès que la page chargée.

Quelqu'un at-il fait cela?

Answer 1

Vous pouvez faire quelque chose comme ça, c'est une version complète à bascule:

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

strictement un fadeout:

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

Answer 2

J'ai eu un problème similaire et fixe comme celui-ci.

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

la propriété de file d'attente, il indique si la file d'attente à l'animation ou tout simplement jouer tout de suite

Answer 3

résultats en hauteur directement animant un mouvement saccadé sur certaines pages Web. Cependant, la combinaison d'une transition CSS avec slideUp() de jQuery permet une disparition progressive.

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

slideFade($('#mySelector')); 

Fiddle avec le code:
http://jsfiddle.net/00Lodcqf

Ceci est la solution que j'utilisé dans le projet de dna.js où vous pouvez voir le code (github.com/dnajs/dna.js) pour voir un soutien supplémentaire pour et basculement rappels.

Answer 4

La réponse acceptée par "Nick Craver" est certainement la voie à suivre. La seule chose que j'ajouterais, c'est que sa réponse ne le «cache» pas, ce qui signifie que le DOM le considère toujours comme un élément viable à afficher.

Cela peut être un problème si vous avez des marges ou des remplissages sur l'élément 'slid' ... ils seront toujours affichés. Donc, je viens d'ajouter un rappel à la fonction Animate() pour cacher réellement après l'animation est terminée:

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

Answer 5

Lancer un raffinement plus là sur la base @CodeKoalas. Il prend en compte la marge verticale et le remplissage mais pas l'horizontale.

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

Answer 6

Il est possible de le faire avec les méthodes et slideUpfadeOut eux-mêmes comme ceci:

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