CODEWITHSUNDEEP
javascriptjquery
Oliver Chalmers
Oliver Chalmers

Reputation: 127

Preventing multiple functions if something is currently selected

I have a navigation menu that upon hovering (using the hoverIntent plugin and tweenmax to animate) replaces a div with the relevant background image. I have this all working fine, but what i'm stumped with is how to prevent the action being repeated on the element that is currently selected. So for example if you hover over the first and then hover off it I don't want the action to be repeated once you hover over that one again because it is already selected. Attached is the link my fiddle http://jsfiddle.net/olichalmers/5csofnhz/1/ 

var homeNav = function () {
    var tgt = $(this);

    $("#homeImageNav a ").hoverIntent({
        over: homeNavOver,
        out: homeNavOff,
        interval: 0
    });

    function homeNavOver() {

        var tgt = $(this);
        var bgHold = $("#bgHolder");
        var bg = tgt.attr('data-bg');

        if (!tgt.hasClass('current')) {
            TweenMax.set($("#bgHolder"), {
                opacity: 0,
                background: bg,
                scale: 1.1
            });
            TweenMax.to(bgHold, 1.5, {
                opacity: 1,
                scale: 1,
            });
        }
        //tgt.addClass('current');
    }

    function homeNavOff() {
        //if (tgt.hasClass('current')) {
        //tgt.removeClass('current');
        //}
    }
};

And here is the homeNav function.

Upvotes: 0

Views: 61

Answers (3)

Puneet
Puneet

Reputation: 2051

Updated your Fiddle

What I have added is:

  1. One variable to store current selected link
  2. Check it with the hovered link
  3. If it is not the same then perform Background change
  4. Else do nothing.
  5. Update everytime any link(One or Two) is hovered

Upvotes: 2

Vishwajeet Bose
Vishwajeet Bose

Reputation: 430

Look on this :
    http://jsfiddle.net/5csofnhz/6/

If any query feel free to ask

Upvotes: 1

Manik Arora
Manik Arora

Reputation: 4792

You just need to make changes in your function - homeNavOff like this:

function homeNavOff() {
    $('#homeImageNav a').removeClass('current');
    $(this).addClass('current');
}

See it in action on this fiddle

Upvotes: 3

Related Questions