Scrolling list with hoverIntent

Scrolling list with hoverIntent

Hi,

I am fairly new to jquery and have found 2 useful examples for the effect I am trying to achieve.  The basic idea is to have a scrolling list that when you hover over an item the other items in the list fade out and the scrolling is paused.  The below code almost achieves this however the hover function is not consistent and the scolling doesn't pause.  If anyone could take a look at this and point me in the right direction it would be most appreciated.

The hover feature makes use of this plugin http://cherne.net/brian/resources/jquery.hoverIntent.html. 

Many thanks

Neo_dev

  1. $(document).ready(function(){
       
        var first = 0;
        var speed = 200;
        var pause = 6500;
       
    function newsticker()
        {
            // algorithm:
            // get last element, remove it from the list,
            // add to first position with hidden style
            // slideDown the new first element
            // continue
            last = $('ul#listticker li:last').hide().remove();
            $('ul#listticker').prepend(last);
            $('ul#listticker li:first').slideDown("slow");
       
            $("#listticker").hover(
             function() {},
             function() {       
               $('#listticker>li').fadeTo("fast", 1.0);
                     }
            );

            $("#listticker>li").hoverIntent(
               function(){
           $(this).attr('class', 'current'); // Add class .current
           $(this).siblings().fadeTo("fast", 0.3); // Fade other items to 30%
           $(this).fadeTo("slow", 1.0); // Fade current to 100%

        },
        function(){           
          $(this).removeClass("current"); // Remove class .current
          $(this).fadeTo("fast", 1.0); // This should set the other's opacity back to 100% on mouseout  
        });
       
        }
       
        interval = setInterval(newsticker, pause);
           



    });