jquery - show/hide elements + control individual time for each element
<p>I'm trying to show and hide elements, sort of like a slideshow, but I want to control how long each individual element is shown for. I don't want the elements to fade in or out either, but just appear immediately after the previous element has been hidden. Try to picture credits after a tv show or something like that, but each element can be individually timed. How can I achieve this with what I have so far?</p>

<p>(I'm having trouble using .delay - it's not doing what I've told it to do in the js)</p>

<pre><code>&lt;html&gt;
&lt;title&gt;Untitled&lt;/title&gt;
&lt;head&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt;

$(document).ready(function() {

    $('#one').delay(1000).show(0, function() { });

    $('#one').delay(3000).hide(0, function() { });

    $('#two').delay(3000).show(0, function() { });

    $('#two').delay(4000).hide(0, function() { });

    $('#three').delay(4000).show(0, function() { });

    $('#three').delay(6000).hide(0, function() { });

    $('#four').delay(6000).show(0, function() { });

    $('#four').delay(6000).hide(0, function() { });

});

&lt;/script&gt;   
&lt;style type="text/css" media="screen"&gt;

    body {
    margin: 0px;
    padding: 0px;
    font-family: arial, sans-serif;
    padding: 0px;
    background: #fff;
    }

#one, #two, #three, #four, #five, #six {
    position: absolute;
    top: 50px;
    left: 50px;
    display: none;
    font-size: 48px;
    font-weight: bold;
    font-family: arial, sans-serif; 
    color: #111;
}

&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;              
    &lt;p id="one"&gt;this is text #1&lt;/p&gt;
    &lt;p id="two"&gt;this is text #2&lt;/p&gt;
    &lt;p id="three"&gt;this is text #3&lt;/p&gt;
    &lt;p id="four"&gt;this is text #4&lt;/p&gt;
    &lt;p id="five"&gt;this is text #5&lt;/p&gt;
    &lt;p id="six"&gt;this is text #6&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
