CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sushil Raghav
Sushil Raghav

Reputation: 253

How can we stop Jquery animation while hovering over sub navigation?

Requirement:

Example Link: http://jtstratford.advisorproducts.com/overview

On this page when we hover over Main navigation then their below yellow line animate or move along with your mouse which is ok.

But can we make it so it only moves when you are hovering over the primary navigations? If say I'm hovering over Investments and go to the sub-navigation for Advisors v Brokers, the yellow bar should remain under Investments it will not move along with subnavigation.

Below is the JS Code:

// DOM Ready
$(function () {

    var $el, leftPos, newWidth;

    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
    $("#magicLine").append("<li id='magic-line'></li>");

    /* Cache it */
    var $magicLine = $("#magic-line");

    $magicLine
        .width($(".selectednav").width())
        .css("left", $(".selectednav a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());

    $("#magicLine li").find("a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();

        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function () {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
});

Upvotes: 1

Views: 302

Answers (2)

&#193;ron Stankovics
&#193;ron Stankovics

Reputation: 95

Your selector is wrong, you're querying for all the anchors in a li tag inside #magicLine. This might work:

$("#magicLine > li").children("a")

Upvotes: 1

aug
aug

Reputation: 11714

I believe the best way to go about it is perhaps giving each element in your primary navigation you have (Home, About, Investments, etc) a class. Then maybe you can only animate if the element you are hovering over has that specific class. You can do this by calling a .hasClass() in jQuery.

i.e.

if (element.hasClass("primary")) {
//want to animate magic bar
}

Upvotes: 0

Related Questions