web-dev-qa-db-fra.com

jQuery css Visibilité avec animation

J'ai quelques divs placés les uns sous les autres et j'utilise la visibilité css pour les faire apparaître et disparaître. La raison pour laquelle j'utilise la visibilité est que les div ne bougent pas.

Pour le fondu d'entrée, j'utilise:

$('.drop1').css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0});

et pour fade out j'utilise:

$('.drop1').css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1.0})}, 200);

Le FadeIn fonctionne, mais le fadeOut ne fonctionne pas.

Maintenant, vous pouvez penser que le problème est le dernier ', 2' mais je devrai l'utiliser comme un retard depuis le fondu/visibilité: caché est sur l'événement mouseleave après 200ms.

Ma question est donc: comment puis-je faire la visibilité cachée avec l'animation pour agir comme un fadeOut.

Merci beaucoup

javascriptjquerycssanimationvisibility
51
jQuerybeast

$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

67
Blazemonger

pourquoi le rendre si difficile, au lieu d'animer le css, vous pouvez utiliser la fonctionnalité de fondu par défaut

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

modifier

si vous voulez cependant le faire disparaître sans perdre la hauteur. vous pouvez utiliser fadeTo (durée, opacité, [rappel]);

$('.drop1').fadeTo(200, 0);

vérifiez cet exemple: http://jsfiddle.net/ufLwy/1/

59
Sander

J'avais des problèmes similaires, et voici ce que j'ai fini par faire.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

La raison pour laquelle je l'ai fait est que

  1. fadeIn ()/fadeOut () utilise 'display' qui F augmente la hauteur d'un élément
  2. fadeTo n'affecte pas la `` visibilité '', donc alors que l'élément est visuellement caché avec opacité: les utilisateurs peuvent toujours interagir (c'est-à-dire cliquer) avec l'élément invisible
  3. animate () est asynchrone, donc le chaînage CSS à la fin ne garantit pas qu'il s'exécutera une fois l'animation terminée. Ce n'est qu'en utilisant l'objet différé que les animations renvoient ($ .when ()/$ .done ()) vous garantira que le CSS est appliqué après tout les animations sont terminées.

MODIFIER Alternativement, vous pouvez appliquer la "visibilité: cachée" à chaque élément individuel une fois que leur animation respective est terminée. Cela peut être un peu plus rapide pour sélectionner des groupes d'éléments plus importants, car vous ne recherchez qu'une seule fois le DOM pour le groupe d'éléments.

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}
7
hypno7oad

J'ai eu un problème similaire et je l'ai résolu de cette façon:

Pour fondre:

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

Pour disparaître:

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

Comme vous pouvez le voir, je cache le div "#id" une fois l'animation terminée. J'espère qu'il n'est pas trop tard

5
Miguel Higuera Romero

Je sais que c'est un ancien poste mais je suis tombé sur une situation similaire et c'est ce que j'ai fini par faire

$(".drop1").css("visibility", "visible").show().fadeOut(5000);
0
codingforpassion