cancel jquery method on mouseleave

Question

Hi i have a method that changes the background of a div every few seconds, Like a carousel, when the user rolls over a certain bit of text. on the #h2Create mouseleave event i want to cancel the changingCarosel method(stop the carousel from playing). How can i do this??

$(document).ready(function () {


    $("#h2Create").mouseenter(function () {
        changingCarosel('create');
        $("#h2Create").css("color", "#99eee5");
        $("#ServiceDesc").text('WEB/MOBILE/APPS/BESPOKE DESIGN AND BUILD');

    });
    $("#h2Create").mouseleave(function () {

        $("#h2Create").css("color", "#fff");
    });
});

changingCaroselvar bgChangeTimer = {};
var bgSecondRotation = {};
var bgThirdRotation = {};
var bgFourthRotation = {};
function changingCarosel(param) {


    switch (param.toString())
    {
    case 'create':
    $("#ServicesBackgroundImage").css("background-image", "url(/images/spreadVenture.jpg)");
        bgChangeTimer = $.timer(2700, function () {

        $("#ServicesBackgroundImage").css("background-image", "url(/images/Spreadthorntons.jpg)");

        bgSecondRotation = $.timer(2700, function () {

            $("#ServicesBackgroundImage").css("background-image", "url(/images/spreadC2K.jpg)");
            bgSecondRotation = $.timer(2700, function () {
                changingCarosel("create");
            });
        });

    });
    break;
case 'buzz':
    $("#ServicesBackgroundImage").css("background-image", "url(/images/jr.jpg)");
    bgChangeTimer = $.timer(2700, function () {

        $("#ServicesBackgroundImage").css("background-image", "url(/images/vufold.jpg)");

        bgSecondRotation = $.timer(2700, function () {

            $("#ServicesBackgroundImage").css("background-image", "url(/images/prmothean.jpg)");
            bgThirdRotation = $.timer(2700, function () {
                $("#ServicesBackgroundImage").css("background-image", "url(/images/dayParade.jpg)");
                bgFourthRotation = $.timer(2700, function () {
                    changingCarosel("buzz");
                });
            });
        });

    });
    break;
default:
    $("#ServicesBackgroundImage").css("background-image", "url(/images/ifIruledTheWorld.jpg)");
    bgChangeTimer = $.timer(2700, function () {

        $("#ServicesBackgroundImage").css("background-image", "url(/images/Spreadthorntons.jpg)");

        bgSecondRotation = $.timer(2700, function () {

            $("#ServicesBackgroundImage").css("background-image", "url(/images/spreadC2K.jpg)");
            bgSecondRotation = $.timer(2700, function () {
                changingCarosel("spread");
            });
        });

    });
    break;
    }
}

Answer 1

I don't recognize the $.timer() function. Is it some plugin? I can't find any documentation.

If it returns a plain javascript timer, created with setInterval or setTimeout, you can cancel it with clearInterval(bgChangeTimer); or clearTimeout(bgChangeTimer); respectively.

Check the documentation of the plugin you are using.

Otherwise, you could try out the Cycle plugin. It does this very easily and flexibly: http://jquery.malsup.com/cycle/