jQuery hover in function

Question

My script works fine without $this, but when I delete $this, then on hover script display all submenus. Could someone explain me where I make mistake?

$(function () {
    var timeoutId;
    $(".mainmenu li").hover(function () {
            if (!timeoutId) {
                timeoutId = window.setTimeout(function () {
                    timeoutId = null;
                    $(this).find('.submenu').slideDown('slow');
                }, 1500);
            }
        },
        function () {
            if (timeoutId) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
            } else {
                $(".submenu").slideUp('slow');
            }
        });
});

My html:

<div id="a">
   <ul class="mainmenu">
   <li>
      CARS
      <ul class="submenu">
         <li><a href="#">White</a></li>
         <li><a href="#">Black</a></li>
         <li><a href="#">Red</a></li>
         <li><a href="#">Silver</a></li>
         <li><a href="#">Yellow</a></li>
         <li><a href="#">Other</a></li>
      </ul>
   </li>
   <li>
      TIRES
      <ul class="submenu">
         <li><a href="#">14"</a></li>
         <li><a href="#">15"</a></li>
         <li><a href="#">16"</a></li>
         <li><a href="#">17"</a></li>
         <li><a href="#">18"</a></li>
      </ul>
   </li>
</div>

.mainmenu has more than 2 submenus.

Can you put up a jsfiddle to show what you want to achieve and what $this is? — Sami, Nov 27 '14 at 08:26
possible duplicate of [How to access the correct \`this\` / context inside a callback?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — Scimonster, Nov 27 '14 at 08:29
[jsfiddle demo](http://jsfiddle.net/9ngh35ey/) Now on hover both submenus are displaying, I need to display only menu which is hovered — pobliska, Nov 27 '14 at 08:41

score 2 · Accepted Answer · answered Nov 27 '14 at 08:44

it's just an untested shot in the dark, but i think you're loosing the element context in your hover function by using the context of the timeout function.
use something like a self variable to store the element and use it after the timeout expired.

$(function () {
    var timeoutId;
    $(".mainmenu li").hover(function () {
            // store the context
            var self = this;

            if (!timeoutId) {
                timeoutId = window.setTimeout(function () {
                    timeoutId = null;
                    // this represents the context of the timeout function
                    // we're using the stored context here
                    $(self).find('.submenu').slideDown('slow');
                }, 1500);
            }
        },
        function () {
            if (timeoutId) {
                window.clearTimeout(timeoutId);
                timeoutId = null;
            } else {
                $(".submenu").slideUp('slow');
            }
        });
});

jQuery hover in function

1 Answers1