For Loop

by Hari Menon

HTML

<ul class="side-block-content">
    <li>
        <marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
            <a href="#"><span>First Item</span></a>
        </marquee>
    </li>
    
    <li>
        <marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
            <a href="#"><span>Second Item</span></a>
        </marquee>
    </li>
    
    <li>
        <marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
            <a href="#"><span>Third Item</span></a>
        </marquee>
    </li>
    
    <li>
        <marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
            <a href="#"><span>Fourth Item</span></a>
        </marquee>
    </li>
    
    <li>
        <marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
            <a href="#"><span>Fifth Item</span></a>
        </marquee>
    </li>
    
    <li>
        <marquee scrollamount="5" direction="left" width="233" align="left" behavior="alternate">
            <a href="#"><span>Sixth Item</span></a>
        </marquee>
    </li>
</ul>

CSS

ul { width: 80%; }
li { border:1px solid #999; }

JavaScript

$(document).ready(function() {
    $("ul.side-block-content li marquee").each(function() {
        this.stop(); // prevent the marquee from scrolling initially
    }).mouseenter(function() {
        this.start(); // start the scroll onmouseenter
    });
});