"else if" in jQuery wasn't performed

Question

I want to use magic line jquery navigation effect both horizontal and vertical menu at the same time. http://css-tricks.com/jquery-magicline-navigation/

$(function() {  var $el, leftPos, topPos;

I chose default region for my effect

$("#region-top-left").append("< li id='magic-line'></ li >");
var $magicLine = $("#magic-line");

I defined first statement - when i hover something in main horizontal menu

            {

                $magicLine
                    .css("left", $('.active').position().left)

                .data("origLeft", $magicLine.position().left)

                ('.menu').find('li').hover(function () {

                    $el = $(this);
                    leftPos = $el.position().left;
                    magicLine.stop().animate({
                        left: leftPos,
                    });
                }, function () {
                    $magicLine.stop().animate({
                        left: $magicLine.data("origLeft"),

                    });
                });
            }

and if i hover something in the navigation vertical menu

            else if ('#vertical-menu:hover')

do that

             {
                $magicLine
                    .css("top", $('.active').position().top)
                    .data("origTop", $magicLine.position().top)


                $('.menu').find('li').hover(function () {
                    $el = $(this);
                    topPos = $el.position().top;


                    $magicLine.stop().animate({
                        top: topPos,

                    });
                }, function () {
                    $magicLine.stop().animate({
                        top: $magicLine.data("origTop"),

                    });
                });
            }
        }
    };
}(jQuery));

But works only the first condition. What should i do? Any help will be appreciated.

Update. Thank for your help dave and Evan. Now my code looks like that

(function ($) {

this is for

Drupal.behaviors.exampleModule = {
attach: function (context, settings) {

drupal

var $el, leftPos, topPos;
$("#region-top-left").append("<li id='magic-line'></li>");
var $magicLine = $("#magic-line");

.on('hover',function() didn't work

$('#horizontal-menu').hover(function() {
$magicLine
.css("left", $('.active').position().left)
.data("origLeft", $magicLine.position().left)


$('.menu').find('li').hover(function() {
    $el = $(this);
    leftPos = $el.position().left;


    $magicLine.stop().animate({
        left: leftPos,

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

    });
 }
 );});


  $('#vertical-menu').hover(function() {
    $magicLine

    .css("top", $('.active').position().top)
    .data("origTop", $magicLine.position().top)


  $('.menu').find('li').hover(function() {
    $el = $(this);
    topPos = $el.position().top;


        $magicLine.stop().animate({
        top: topPos,

         });
          }, function() {
     $magicLine.stop().animate({
        top: $magicLine.data("origTop"),

              });
           });
         });
        }   
     };   
   })
(jQuery);

and it works. Yay!

Answer 1

This

if ('#horizontal-menu:hover')

Should be

$('#horizontal-menu').on('hover',function() {
//code goes here
});

This

if ('#vertical-menu:hover')

Should be

$('#vertical-menu').on('hover',function() {
//code goes here
});

Answer 2

You don't need to use an else if, just create the two events and jQuery will handle the rest for you

$('.menu').find('li').on('hover', function() {
    // code here ...
});

$('#another').on('hover', function(){
    // more code here...
});