News Ticker #3

by jch02140

HTML

<div id="wrap">
        <div id="head" class="block"></div>
        <div id="content">
            <div id="info" class="block">
                <ul id="ticker">
                    <li> <span>Title Lorem Ipsum 1</span>
 <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio
                            eros pellentesque sapien, at consectetur mi nibh at massa.
                        </a>

                    </li>
                    <li> <span>Title Lorem Ipsum 2</span>
 <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio
                            eros pellentesque sapien, at consectetur mi nibh at massa.
                        </a>

                    </li>
                    <li> <span>Titlr Lorem Ipsum 3</span>
 <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio
                            eros pellentesque sapien, at consectetur mi nibh at massa.
                        </a>

                    </li>
                    <li> <span>Title Lorem Ipsum 4</span>
 <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio
                            eros pellentesque sapien, at consectetur mi nibh at massa.
                        </a>

                    </li>
                    <li> <span>Title Lorem Ipsum 5</span>
 <a href="#">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ante id porttitor faucibus, odio
                            eros pellentesque sapien, at consectetur mi nibh at massa.
                        </a>

                    </li>
                </ul>
            </div>
        </div>
    </div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #FAFAFA;
    color: #666;
    font: 13px Tahoma;
    cursor: default;
}
body a {
    text-decoration: none;
    outline: none;
    color: #06C;
}
body a:hover {
    text-decoration: underline;
}
body .hidden {
    display: none;
}
body h1 {
    font-size: 32px;
    font-weight: normal;
}
body h2 {
    padding-bottom: 3px;
    border-bottom: 1px solid #E6E6E6;
    font-size: 17px;
    font-weight: normal;
}
body pre {
    text-align: left;
    padding: 10px;
    background: #e4e4e4;
    margin-bottom: 16px;
}
body ul {
    list-style-type: none;
}
div.clear {
    clear: both;
}
div#head {
    padding-top: 10px;
    border-left-color: #8A6DAE;
}
div#head h1 a {
    color: #444;
    text-decoration: none;
}
div#head h1 span {
    display: block;
    color: #888;
    font-size: 14px;
}
div.block {
    padding: 5px 0 5px 15px;
    border-left-style: solid;
    border-left-width: 20px;
    background-color: #FFF;
}
div.block fieldset {
    width: 700px;
    border: 1px solid #ccc;
    padding: 10px;
}
div.block fieldset input.text {
    border: 1px solid #666666;
    padding: 3px 6px;
    color: #333333;
}
div.block fieldset input.error {
    border: 1px solid red;
}
div.block fieldset input.send {
    border: 1px solid #666666;
    padding: 3px 6px;
    background: #333333;
    color: #fff;
    cursor: pointer;
}
div.block fieldset legend {
    padding: 5px 10px;
    font-weight: bold;
}
div.block fieldset p {
    margin: 8px 0;
}
div.block fieldset label {
    float: left;
    width: 180px;
}
div.block fieldset label.error {
    float: none;
    margin-left: 5px;
    color: red;
}
div#content {
    padding-top: 20px;
}
div#content div.block {
    margin-bottom: 20px;
}
div#info {
    padding-bottom: 30px;
}
div#info.ok {
    border-left-color: #ACD083;
}
div#info.otravez {
    border-left-color: #DC7873;
}
div#info ul {
    margin-top: 10px;
}
div#info ul li {
    float: left;
    margin-right:...

JavaScript

$(function () {
     var ticker = function () {
         setTimeout(function () {
             $('#ticker li:first').animate({
                 marginTop: '-120px'
             }, 800, function () {
                 $(this).detach().appendTo('ul#ticker').removeAttr('style');
             });
             ticker();
         }, 4000);
     };
     ticker();
 });