Skip to main content
Eliminé código repetido.
Origen Enlace
Chofoteddy
  • 6.2k
  • 7
  • 30
  • 65
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)
})

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>
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)
})

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>
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>
Origen Enlace
Ivan Soler
  • 937
  • 1
  • 7
  • 23

Sustituir Div en Intervalo de tiempo sin transiciones

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)
})

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>