javascript - multiple - Fading visibilidad del elemento usando jQuery

jquery css multiple

Question

Tengo problemas para encontrar el parámetro de visibilidad para JQuery.

Básicamente ... el código siguiente no hace nada.

$(''ul.load_details'').animate({
    visibility: "visible"
    },1000);

No hay nada de malo con el código animado (reemplacé la visibilidad con fontSize y estuvo bien. Parece que no puedo encontrar el nombre de parámetro correcto equivalente para "visibilidad" en css.

Answer 1

Esto es lo que funcionó para mí (basado en la respuesta de @ Alan )

        var foo = $(''ul.load_details''); // or whatever
        var duration = "slow";  // or whatever

        if (foo.css(''visibility'') == ''visible'') {
            foo.css({ opacity: 1 }).animate({ opacity: 0 }, duration, function () {
                foo.css({ visibility: "hidden" });
            });
        } else {
            foo.css({ opacity: 0 }).animate({ opacity: 1 }, duration).css({ visibility: "visible" });
        }

Cuando el elemento foo sea ​​visible, cambie lentamente la opacidad a cero (mediante animate ) y luego espere hasta que se complete antes de configurar la visibilidad de foo para que se oculte. De lo contrario, si se establece en oculto durante el proceso animado, el efecto de desvanecimiento no ocurrirá ya que está oculto inmediatamente.

Alternativamente, puedes usar el fadeTo() más simple y limpio:

        var foo = $(''ul.load_details''); // or whatever
        var duration = "slow";  // or whatever

        if (foo.css(''visibility'') == ''visible'') {
            foo.fadeTo(duration, 0, function () {
                foo.css({ visibility: "hidden" });
            });
        } else {
            foo.fadeTo(duration, 1).css({ visibility: "visible" });
        }

Answer 2

Esto podría ayudar:

$(".pane .delete").click(function(){
    $(this).parents(".pane").animate({ opacity: ''hide'' }, "slow");
});

Answer 3

No puedes animar la visibility . O algo es visible, o no lo es (evento 1% de elementos opacos son ''visibles''). Es muy parecido a la mitad existente, no tiene sentido. Probablemente sea mejor que animes la opacidad (a través de .fadeTo () etc).

Answer 4

Puede establecer la opacidad en 0.0 (es decir, "invisible") y la visibilidad en visible (para que la opacidad sea relevante), luego anime la opacidad de 0.0 a 1.0 (para atenuarla):

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

Debido a que establece la opacidad en 0.0, es invisible a pesar de estar configurado como "visible". La animación de opacidad debería proporcionarle el fundido de entrada que está buscando.

O, por supuesto, puede usar las .show() o .fadeTo() .

EDITAR: Volomike es correcto. CSS, por supuesto, especifica que la opacity toma un valor entre 0.0 y 1.0, no entre 0 y 100. Fixed.

Answer 5

Tal vez solo buscas mostrar u ocultar un elemento:

$(''ul.load_details'').show();
$(''ul.load_details'').hide();

¿O desea mostrar / ocultar elementos mediante la animación (esto no tiene sentido, por supuesto, ya que no se desvanecerá):

$(''ul.load_details'').animate({opacity:"show"});
$(''ul.load_details'').animate({opacity:"hide"});

¿O quieres desvanecer realmente en el elemento como este:

$(''ul.load_details'').animate({opacity:1});
$(''ul.load_details'').animate({opacity:0});

Tal vez un buen tutorial te ayude a ponerte al día con jQuery:

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/