Simple Ticker (jQuery)

Question

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

I'd like to show only one li at a time using slide effect, thats it. I'd like to avoid using plugins for something as simple as this.

Thanks in advance for your help.

Answer 1

Your question already mentions jquery as the javascript framework of choice. The best place you can start is the jquery docs on hiding:

http://api.jquery.com/hide/

and sliding:

http://api.jquery.com/slideUp/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideToggle/

Answer 2

i have made something simple up for you (based on your description), just to point you in the right direction:

check it out here: http://jsfiddle.net/ACenH/7/

function slider(container, delay){
if ($(container).length){ // checks if the slider exists in your dom
    container = $(container) // select the container elements and set them as variable 
    var slides = container.length, // gives back the total LI's you ahve
        slide = 0 // set the actual li to show

        setInterval(function(){ // set a Interval for your main function
            if (slide == slides) { // if the actual slide is equal the total slides the slide counter is set to 0
               container.slideDown() // and all slides a shown again
               slide = 0
            }

            container.eq(slide).slideUp() //slides the selected slide up i think you could think of a solution with .next() instead of eq() 

            slide++ // slide counter +1

        }, delay)

}else{ // if the slider does not exists in your dom nothing happens
        return false;
}
}

slider('ul > li', 2000) // call your slider function