CODEWITHSUNDEEP
jqueryjquery-eventsmouseleave
phil crowe
phil crowe

Reputation: 897

Cancel jQuery method on mouseleave

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;
    }
}

Upvotes: 0

Views: 248

Answers (1)

geon
geon

Reputation: 8477

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/

Upvotes: 0

Related Questions