1

También me valdría sustituir directamente caracteres en intervalos de tiempo cíclicos si creeis que es más limpio. Aquí está el código con el que estoy trabajando.

jQuery(function () {
    var $els = $('div[id^=picture1]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide(10);
    setInterval(function () {
        $els.eq(i).hide(function () {
            i = (i + 1) % len
            $els.eq(i).show(10);
        })
    }, 1500)
})
jQuery(function () {
    var $els = $('div[id^=picture2]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn(0);
        })
    }, 900)
})
body {margin:0; color:rgba(0,255,22,1.00); background:black; font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-size:6px; line-height:7px; display:inline-block;}
.position { text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="picture1">
    <span class="quote">A</span>
</div>

<div id="picture12">B</div>

<div id="picture2">
    <span class="quote">A</span>
</div>
<div id="picture22">B</div>

4
  • Ahora mismo no está muy claro qué es lo que se quiere en esta pregunta. Por favor, añade una explicación mejor de lo que quieres: ¿qué es lo que quieres hacer?¿cúal debería ser el resultado si fuera bien?¿por qué es incorrecto el código de arriba?
    – Alvaro Montoro
    Commented el 13 mar. 2016 a las 16:26
  • Hola @AlvaroMontoro mi problema es que necesito que el cambio sea inmediato, no ese apagarse paulatino, que el ojo no pueda percibir ni un momento en el que no hay ninguna letra. Espero haberme explicado mejor y muchas gracias por adelantado.
    – Ivan Soler
    Commented el 13 mar. 2016 a las 16:53
  • Creo que ahora comprendo mejor. Lo que quieres es que la letra desaparezca de golpe sin que sea una transición. ¿Es eso correcto?
    – Alvaro Montoro
    Commented el 13 mar. 2016 a las 17:08
  • Exacto @AlvaroMontoro pero que el resto siga funcionando igual (cíclico e infinito)
    – Ivan Soler
    Commented el 13 mar. 2016 a las 17:12

1 respuesta 1

1

Si lo que quieres es que la letra desaparezca de golpe sin que sea una transición, debes indicar que la duración de la transición sea 0. Si no lo indicas, el valor por defecto será 400 milisegundos (como se indica en la documentación de jQuery).

El cambio sería rápido, donde ahora haces:

    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn(0);
    })

deberías añadir una duración de 0 como haces en el fadeIn:

    $els.eq(i).fadeOut(0, function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn(0);
    })

Y eso debería solucionar el problema. Aquí dejo una demo:

jQuery(function () {
    var $els = $('div[id^=picture1]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide(10);
    setInterval(function () {
        $els.eq(i).hide(0, function () {
            i = (i + 1) % len
            $els.eq(i).show(10);
        })
    }, 1500)
})
jQuery(function () {
    var $els = $('div[id^=picture2]'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    setInterval(function () {
        $els.eq(i).fadeOut(0, function () {
            i = (i + 1) % len
            $els.eq(i).fadeIn(0);
        })
    }, 900)
})
body {margin:0; color:rgba(0,255,22,1.00); background:black; font-family:Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; font-size:6px; line-height:7px; display:inline-block;}
.position { text-align:center;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="picture1">
    <span class="quote">A</span>
</div>

<div id="picture12">B</div>

<div id="picture2">
    <span class="quote">A</span>
</div>
<div id="picture22">B</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.