Substitute Div in Time Interval without transitions

Question

Substitute Div in Time Interval without transitions

Navigation

#1 by (1 votes)

1

I would also be happy to replace characters directly in cyclical time intervals if you think it's cleaner. Here is the code that I'm working with.

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>

javascript jquery html

asked by Ivan Soler 13.03.2016 в 15:16

source

1 answer

Filtering in ComboBox in VB.NET and SQL Server Configure several versions of Python in Sublime Text 2 with REPL

score 1 · Accepted Answer

If you want the letter to disappear suddenly without being a transition, you must indicate that the duration of the transition is 0. If you do not indicate it, the default value will be 400 milliseconds (as indicated in < a href="http://api.jquery.com/fadeOut/"> jQuery documentation ).

The change would be quick, where you now do:

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

You should add a duration of 0 as you do in the fadeIn:

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

And that should solve the problem. Here is a 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>