javascript - jqueryui - sweetalert2

jQuery css Visibilidad con animación

Question

Tengo unos cuantos div colocados uno debajo del otro y uso la visibilidad css para atenuarlos. La razón por la que uso la visibilidad es para que los div no se muevan.

Para fade In estoy usando:

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

y para fade Out estoy usando:

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

El FadeIn funciona , pero el fadeOut no funciona .

Ahora, puede pensar que el problema es el último '' , 200 '' pero tendré que usarlo como un retraso ya que el fadeout / visibility: hidden está en el evento mouseleave después de 200 ms.

Entonces mi pregunta es: ¿cómo puedo hacer que la visibilidad oculta con la animación actúe como un fadeOut?

Muchas gracias

Answer 1

Estaba teniendo problemas similares, y esto es lo que terminé haciendo.

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

La razón por la que hice esto es que

1. fadeIn () / fadeOut () usa ''display'' que F sube la altura de un elemento
2. fadeTo no afecta a la ''visibilidad'', por lo tanto, mientras el elemento se oculta visualmente con opacidad: 0 los usuarios aún pueden interactuar (es decir, hacer clic) con el elemento invisible
3. animate () es asíncrono, por lo que encadenar CSS al final no garantiza que se ejecutará cuando la animación esté completa. Solo al usar el objeto Diferido que devuelve la animación ($ .when () / $ .done ()) se le garantiza que el css se aplica después de que se completen todas las animaciones.

EDITAR Alternativamente, puede aplicar a "visibilidad: oculto" a cada elemento individual una vez que se complete su animación respectiva. Esto puede ser un poco más rápido para seleccionar grupos más grandes de elementos, ya que solo está consultando el DOM para el grupo de elementos una vez.

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

Answer 2

Por qué hacerlo tan difícil, en lugar de animar el CSS, podría usar la funcionalidad de fade predeterminada

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

editar

si, sin embargo, quieres desvanecerse sin perder la altura. puede usar fadeTo (duración, opacidad, [devolución de llamada]);

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

mira este ejemplo: http://jsfiddle.net/ufLwy/1/

Answer 3

Sé que esta es una publicación anterior, pero me encontré con una situación similar y esto es lo que terminé haciendo

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

Answer 4

Tuve un problema similar y lo resolví de esta manera:

Para desvanecerse:

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

Para desvanecerse:

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

Como puede ver, oculto el div "#id" una vez que la animación ha terminado. Espero que no sea demasiado tarde

Answer 5

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

Answer 6

.drop1{ opacity: 0.0; }

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