web-dev-qa-db-fra.com

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

J'ai trouvé jQuery: FadeOut puis SlideUp et c'est bien, mais ce n'est pas celui-là.

Comment puis-je fadeOut() et slideUp() en même temps? J'ai essayé deux appels distincts de setTimeout() avec le même délai, mais la slideUp() s'est produite dès que la page a été chargée.

Quelqu'un a-t-il fait cela?

javascriptjqueryfade
59
Matthew

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

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

Pour un fondu strictement:

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

L'animation directe de la hauteur entraîne un mouvement saccadé sur certaines pages Web. Cependant, la combinaison d'une transition CSS avec la slideUp() de jQuery permet une disparition progressive.

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

slideFade($('#mySelector'));

Jouez avec le code:
https://jsfiddle.net/00Lodcqf/435

bye

Dans certaines situations, une pause très rapide de 100 millisecondes pour permettre plus de décoloration crée une expérience légèrement plus fluide:

   elem.css(fade).delay(100).slideUp();

Ceci est la solution que j'ai utilisée dans le projet dna.js où vous pouvez afficher le code ( github.com/dnajs/dna.js ) pour la fonction dna.ui.slideFade() pour voir un support supplémentaire pour le basculement et les rappels.

21
Dem Pilafian

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 la "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 rembourrages sur l'élément 'glissé' ... ils s'afficheront toujours. J'ai donc ajouté un rappel à la fonction animate () pour le masquer une fois l'animation terminée:

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

Il est possible de le faire avec les méthodes slideUp et fadeOut elles-mêmes comme ceci:

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

Lancement d'un raffinement supplémentaire basé sur @CodeKoalas. Il tient compte de la marge verticale et du rembourrage mais pas horizontal.

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

J'ai eu un problème similaire et l'ai résolu comme ça.

$('#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 lui indique s'il faut mettre l'animation en file d'attente ou simplement la lire immédiatement

2
Rob