Toggling subnav и newsticker

Question

Я хочу показать newsticker по умолчанию, но он расположен таким образом, что при наведении меню субнав должен заменить newsticker. Но я совсем не могу получить его работы:

JSFiddle: http://jsfiddle.net/rd9jS/

$(document).ready(function() { 
    $('#nav > ul > li').mouseover(function() { 
     $('#news').hide(); 
     $(this).parent().find("ul.children").not($('ul.children', this)).hide(); 
     $('ul.children', this).slideDown(); 
    }); 
    $('#nav .children').mouseleave(function (e) { 
     setTimeout(function(){ 
      $(this).hide(); 
      $('#news').slideDown(); 
     },2000); 
     e.stopPropagation(); 
    }); 
}); 

Answer 1

В анонимной функции, предоставляемой setTimeout, this не то, что вы думаете. Это фактически глобальный объект window. Один из способов решения этой проблемы - сохранить ссылку на контекст, в котором создается функция.

$('#nav .children').mouseleave(function (e) { 
    var $children = $(this); 

    setTimeout(function(){ 
     $children.hide(); 
     $('#news').slideDown(); 
    ,2000); 
    e.stopPropagation(); 
}); 

"this" документации MDN является хорошей ссылкой на эту тему, и я цитирую:

объект связан с этим в текущей области определяется тем, как была названа текущая функция