Stop or Pause a Marquee in Starting Position

Question

I have Some Queries Related to Marquee in HTML
1.First i have created a Simply Marquee that movies in Direction Upwards
2.Marquee Contents are Entered in List.
3.Every List should stop for 1 Sec in Staring Position

Is there any way to Solve This Issues

Here is the Picture For Your clarification

Answer 1

I have worked with div as marquee is not cross-browser.

i have also added <div id="cont"></div> to show that even if has something on top it will still work.

code for stooping Every List should stop for 1 Sec in Staring Position

Working Demo http://jsfiddle.net/4yYsu/2/

html

<div id="cont"></div>
<div id="container">
    <ul id="mytext">
        <li>this is a simple text to test custom marquee</li>
        <li>this is a simple text</li>
        <li>test custom marquee</li>
    </ul>
</div>

css

#cont {
    height:200px;
    width:200px;
}
#container {
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:absolute;
}
#mytext {
    display: inline-block;
    position: relative;
    margin-left:10px;
    margin-bottom:10px;
}

js

txt = $("#mytext");
length = $("#mytext li").length;
height_ul = parseInt(txt.height());
height_li = parseInt(txt.height()) / length;
delta = 0;
run();

function run() {
    delta = (delta - height_li < -1 * height_ul) ? height_ul : delta - height_li;
    if (delta <= 0) {
        scroll_li(delta);
    } else if (delta = height_ul) {
        txt.animate({
            top: delta
        }, 0, "linear");
        delta = 0;
        scroll_li(delta);
    }
    setTimeout(run, 1000);
}

function scroll_li(delta) {
    txt.animate({
        top: delta
    }, 2000, "linear").delay(1000);
}

previous code

Working Demo http://jsfiddle.net/cse_tushar/4yYsu/

HTML

<div id="cont"></div>
<div id="container">
    <ul id="mytext">
        <li>this is a simple text to test custom marquee</li>
        <li>this is a simple text</li>
        <li>test custom marquee</li>
    </ul>
</div>

CSS

#cont {
    height:200px;
    width:200px;
}
#container {
    display: inline-block;
    overflow: hidden;
    width: auto;
    position:absolute;
}
#mytext {
    display: inline-block;
    position: relative;
    margin-left:10px;
    margin-bottom:10px;
}

js

$(function () {
    var txt = $("#mytext");
    txt.bind('scroll', function () {
        var el = $(this);
        // Scroll state machine
        var scrollState = el.data("scrollState") || 0;
        el.data("scrollState", (scrollState + 1) % 4);
        switch (scrollState) {
            case 0:
                // initial wait
                el.css({
                    top: 0
                });
                el.show();
                window.setTimeout(function () {
                    el.trigger("scroll");
                }, 1000);
                break;
            case 1:
                // start scroll
                var delta = 0 - parseInt(el.height());
                if (delta < 0) {
                    el.animate({
                        top: delta
                    }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                    delta = -1 * parseInt(delta) + 'px';
                    el.animate({
                        top: delta
                    }, 0, "linear", function () {
                        el.trigger("scroll");
                    });
                    el.animate({
                        top: 0
                    }, 2000, "linear", function () {
                        el.trigger("scroll");
                    });
                }
                break;
        }
    }).trigger("scroll");
});