Visibilité jQuery css avec animation

Question

J'ai quelques divisions placées les unes au-dessous des autres et je suis en utilisant le css de la visibilité à s'estomper dans et hors. La raison pour laquelle j'utilise la visibilité est alors que la div ne bouge pas de place.

Pour un fondu que j'utilise:

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

et de fade Out, je suis en utilisant:

$('.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",200"mais j'ai besoin de l'utiliser comme un retard depuis le fadeout/visibility:hidden est sur mouseleave événement après 200ms.

Donc ma question est: Comment puis-je faire de la visibilité caché avec l'animation d'agir comme un fadeOut.

Merci beaucoup

Answer 1

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

Answer 2

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);
 

Éditer

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/

Answer 3

J'ai eu 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 je l'ai fait c'est que

1. fadeIn()/fadeOut() utilise d'affichage " qui F est un élément de la hauteur
2. fadeTo n'affecte pas la "visibilité", alors que l'élément est visuellement cachée avec opacity:0 utilisateurs sont toujours en mesure d'interagir (c'est à dire de la souris) l'invisible élément
3. animate() est asynchrone, donc le chaînage de CSS à la fin n'est pas une garantie qu'il sera exécuté lorsque l'animation est terminée. Uniquement à l'aide de l'objet Reporté que des animations de retour ($.lorsque() / $.done()) allez-vous être garanti que le css est appliqué après toutes les animations sont complètes.

MODIFIER Vous pouvez aussi demander à "visibility:hidden" pour chaque élément une fois leurs respectifs animation est terminée. Cela peut être légèrement plus rapide pour la sélection des plus grands groupes d'éléments, puisque vous êtes seulement en interrogeant le DOM pour le groupe d'éléments en une fois.

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

Answer 4

.drop1 {opacité: 0,0; }

$ ('. drop1'). fadeTo ("lent", 1.0);