Tengo un script que muestra un elemento cuando un botón es presionado. Estoy tratando de desaparecer en la muestra del elemento así que no es tan abrupto.

El JS:

document.getElementById('next').style.display = 'block';
document.getElementById('next').fadeIn(1000);

Esto funciona bien, excepto por el fade en la animación. ¿Qué estoy haciendo mal. He probado la combinación de ambas declaraciones en una sola declaración, y también he probado la configuración de la fade in antes de la display:block, pero no en todos. Todavía bastante nuevo para JS, así que sólo estoy tratando de averiguar lo que es posible. Gracias de antemano

  • .fadeIn() es un método jQuery (tal vez en otras bibliotecas demasiado), no un elemento JavaScript método. No etiqueta a la pregunta con jQuery, pero la manera de hacerlo con jQuery es $("#next").fadeIn(1000);. Si quieres hacerlo con JavaScript puro, tendrás que buscar maneras para imitar este comportamiento
  • estás usando jQuery?
  • Yo no estaba usando jQuery. Gracias.
  • a continuación, compruebe mi respuesta… usando JQuery va a hacer que tu código sea mucho más simple y limpio, aunque..
  • Está usted a través de la biblioteca?
  • Aquí es la alternativa a los códigos : stackoverflow.com/questions/19706147/…

InformationsquelleAutor EGHDK | 2013-05-31

4 Comentarios

  1. 2

    No hay .fadeIn() método de elementos del DOM.

    document.getElementById('ques_2').fadeIn(1000);

    Probablemente usted está viendo un poco de jQuery u otro código de la biblioteca. Que el código que se debe ejecutar en el jQuery (o lo que sea) objeto que envuelve su elemento DOM.


    Otro enfoque que va a funcionar en los navegadores modernos sería el uso de un CSS3 transición. Usted podría tener el JavaScript de la aplicación de una nueva clase, y dejar que el CSS tener cuidado de que el efecto visual.


    Si va a utilizar una librería como jQuery, que necesita para importar en su página. Por ejemplo, poner esto en el head de su página:

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    A continuación, siga las Reglas de API para obtener los elementos del DOM y llamar a los métodos.

    Puede utilizar el nativo DOM métodos para hacer la captura, o simplemente el uso de jQuery, lo cual tiene sentido si usted decidió cargarlo.

    • Puedo llamar a una función de jQuery dentro de un script en javascript que escribí?
    • jQuery es sólo una biblioteca de pre-escrito el código JavaScript. Así que, sí, usted acaba de ejecutar sus funciones dentro de su actual JavaScript. No puedo decir si tiene sentido utilizar jQuery en tu proyecto o no. Sólo usted puede decidir que.
    • Gracias! Exactamente lo que yo necesitaba.
    • Eres bienvenido.
    • Alguna idea de por qué no funciona? Yo creo que es porque estoy tratando de utilizar jQuery en JS. jsfiddle.net/7N5sE
    • En JS es el único lugar en el que puede el uso de jQuery. 🙂 De nuevo, todo lo que es es una colección de pre-escrito el código JavaScript. El problema es que su showHide función dentro de otra función… aunque usted no lo puede ver. Mira los menús de la izquierda. Usted tiene onLoad seleccionado en el segundo menú desplegable. Esto significa que su código está siendo definida en un window.onload controlador. Elija uno de los no wrap opciones en lugar de hacer su showHide() global.
    • consulte jsfiddle.net/7N5sE/1
    • Esto es genial. Muchas gracias. Tiene sentido ahora!
    • Si usted va a utilizar una librería como jQuery, yo sugeriría que se ejecuta a través de un rápido tutorial o dos. Usted aprenderá más de lo que usted necesita saber en un corto período de tiempo.
    • Va a hacer. Gracias
    • Muy rápido, ¿sabes por qué esto no cambia a rojo? jsfiddle.net/G7LN7/1
    • jQuery no animar colores. Hay plugins que hacen esto, o usted puede también importar el jQueryUI biblioteca (o partes de ella) para obtener el color de las animaciones.
    • Interesante… hay un lugar donde yo pueda ver lo regular jQuery es limitado? O ¿cuáles son algunas cosas que puede intentar que no trabajo Regular con jQuery.
    • Es más o menos viene a ser el aprendizaje de la API. Si algo no funciona, busque en la documentación para asegurarse de que está utilizando correctamente. Si no se puede entender, entonces hay StackOverflow para ayudar a usted. 🙂 Por ejemplo, a medida que aprende, usted aprenderá que el .fade...() métodos son simplemente un contenedor para una llamada a .animate(), y el .animate() docs habla un poco acerca de los colores.
    • Gotcha. Muchas gracias. Super útil.
    • permítanos continuar esta discusión en el chat

  2. 4

    Podría usar CSS3 para desarrollar este efecto.

    Con este HTML:

    <div id='fader'></div>

    y este estilo:

    #fader {
       opacity:0;
       -webkit-transition: opacity 2s;
       -moz-transition: opacity 2s;
       -o-transition: opacity 2s;
       transition: opacity 2s;
    }

    Quitar el atributo de visualización del estilo.

    Después de que usted podría usar JavaScript para cambiar el estilo, y el efecto ocurrirán automáticamente:

    document.getElementById('fader').style.opacity = 1;

    DEMO: http://jsfiddle.net/AUak7/

    • el op pidió display:block no opacidad
  3. 2

    con javascript simple que usted puede hacer algo como esto…
    aquí también estoy imprimiendo el valor de opacidad como ser el aumento de…

    DEMO

    function show() {
        document.getElementById('next').style.opacity = (parseFloat(document.getElementById('next').style.opacity) + 0.1);
        document.getElementById('value').innerHTML = (document.getElementById('next').style.opacity);
        if (document.getElementById('next').style.opacity < 1) {
            setTimeout(show, 400);
        }
    }
    
    function fadeIn() {
    
        document.getElementById('next').style.opacity = 0;
        document.getElementById('next').style.display = 'block';
        setTimeout(show, 400);
    }
    
    fadeIn();
  4. 0

    FadeIn es una función jQuery, pero usted está usando javascript simple. Incluir jQuery y uso:

    $("#next").fadeIn(1000);

Dejar respuesta

Please enter your comment!
Please enter your name here