Wiadomosci

Wyswietlanie wiadomosci z efektem jquery

by Lukasz Baran

HTML

<div class="news_bar" original-title="">
    <ul>
        <li class="news_quotes" style="display: list-item;">Witamy na Forum</li>
        <li class="news_quotes" style="display: none;">O to prosty przykład wyświetlania wiadomości</li>
        <li class="news_quotes" style="display: none;">Przykładowy news</li>
    </ul>
</div>

CSS

.news_bar {
    margin: auto auto;
    width: auto;
    height: 28px;
    line-height: 2px;
    background: #262626;
    color: #ff2400;
    border: 4px solid #161616;
}
.news_quotes {
    font-family:'Roboto Condensed', sans-serif;
    display: none;
    list-style: none;
    font-size: 13px;
    text-align: center;
    margin: 0;
    padding: 0;
}

JavaScript

jQuery(function () {

    var quotes = jQuery(".news_quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(1000)
            .delay(3000)
            .fadeOut(1000, showNextQuote);
    }
    showNextQuote();

});