Question

How do I do this?

    $('#forward').mouseenter(
        function() {
            $("#scroller").trigger("slideTo", [1, "next"]);         
        }
    );

    $('#backward').mouseenter(
        function() {
            $("#scroller").trigger("slideTo", [1, "back"]);         
        }
    );

It is supposed to keep scrolling while my mouse is on top of the button and will just stop scrolling when my mouse is outside the button. Apparently It will just scroll one time and then stop. I need the button to be hover activated so that users wouldn’t keep clicking the button.

reference: http://caroufredsel.frebsite.nl/code-examples/custom-events.php

Answer 1

I believe you are looking for this http://jsfiddle.net/DNcAS/3/

$("#foo2").carouFredSel({
    auto    : {
        button          : "#foo2_play"
    },
    scroll  : {
        items           : 1,
        duration        : 1000,
        pauseDuration   : 0
    }
}).trigger("pause");


 $('#foo2_next').mouseenter(
        function() {
            $("#foo2").trigger("configuration", ["direction", "left"])
                      .trigger("play");
        }).mouseleave(function(){
            $("#foo2").trigger("pause"); 
        });

 $('#foo2_prev').mouseenter(
        function() {
            $("#foo2").trigger("configuration", ["direction", "right"])
                      .trigger("play");
        }).mouseleave(function(){
            $("#foo2").trigger("pause"); 
        });​

For a linear scroll modify the configuration options as http://jsfiddle.net/DNcAS/4/

scroll  : {
    items           : 1,
    duration        : 1000,
    easing          : "linear",
    pauseDuration   : 0
}

Or you can replace mouseenter and mouseleave by hover http://jsfiddle.net/DNcAS/5/

ps: even shorter version http://jsfiddle.net/DNcAS/6/

 $('#foo2_next,#foo2_prev').hover(function() {
            var dir = $(this).hasClass('next') ? 'left' : 'right'; 
            $("#foo2").trigger("configuration", ["direction", dir])
                      .trigger("play");
        }, function(){
            $("#foo2").trigger("pause"); 
        });