Me gustaría aplicar un efecto fadeIn a un addClass función..y fadeOut para removeClass…

Me pueden ayudar?

Este es mi código

$('#loader'+idTurno).addClass('loader');

$('#loader'+idTurno).removeClass('loader');

OriginalEl autor Swim89 | 2013-03-31

5 Comentarios

  1. 36

    Fade In:

    $("#loader").fadeIn("slow", function() {
        $(this).addClass("loader");
    });

    Fade Out:

    $("#loader").fadeOut("slow", function() {
        $(this).removeClass("loader");
    });

    Como otro usuario dijo, puede que desee considerar el uso de toggleClass.

    He probado la solución anterior, pero cuando la segunda función se ejecuta(fadeout) el elemento desaparece por completo.En mi caso los elementos del menú desplegable(select).Lo que he notado es que el elemento que «desaparece» de la vista de un estilo de display:none se aplica. ¿Por qué sucede eso?
    Lea la documentación de fadeOut(). Habla acerca de cómo, después de que la opacidad se establece en 0, la pantalla se establece la propiedad display: noneapi.jquery.com/fadeout
    sí….tienes razón, ¿qué alternativas tengo?De todos modos,el violín es aquí jsfiddle.net/fiddlehunt/achgnmcv pruebe cambiando un valor en el menú De
    Por desgracia, yo soy prohibió hacer de nuevo la pregunta.Me ‘ll ver lo que voy a hacer.De todos modos,gracias.
    no es una solución! oculta el elemento, no sólo la eliminación de la clase

    OriginalEl autor What have you tried

  2. 15

    Otra manera de lograr que, mediante su original código jQuery, CSS manera :

    #loader {
      transition: opacity 500 ease-in-out;
    }

    Una animación más suave, más fácil de mantener.

    No hace nada para mí.
    Usted tiene que usar una clase adicional, como el autor de la pregunta publicado: .loader que se establezca la opacidad a 0 o 1. Luego alternar esta clase con JS.

    OriginalEl autor enguerranws

  3. 3
    #loader {
      transition: all 0.9s ease-out 0s;
    }

    OriginalEl autor Hil

  4. 1

    Hacer es simple :

    $('#loader'+idTurno).addClass('loader').fadeIn(1000);
    $('#loader'+idTurno).removeClass('loader').fadeIn(1000);
    Esto hace que toda la DIV fadein o fadeout, no sólo de la clase.

    OriginalEl autor Sulung Nugroho

  5. -8

    Debe añadir una duración al quitar/addClass método:

    $('#loader'+idTurno).addClass('loader',500);
    $('#loader'+idTurno).removeClass('loader',500);
    Esta respuesta es claramente incorrecto, como se ve en api.jquery.com/addClass no hay duration de la propiedad para la $.addClass() o $.removeClass() métodos.
    Si estamos utilizando únicamente jquery, luego de su declaración sería correcto @DavidScherer. Sin embargo, si el OP utiliza jqueryUI lo anterior sería lo correcto, como jqueryUI (aunque bastante fuerte para añadir un elemento pequeño) en efecto, el apoyo de la decoloración de una clase dentro y fuera de la duración. api.jqueryui.com/addClass

    OriginalEl autor imfromthepast

Dejar respuesta

Please enter your comment!
Please enter your name here