Submenu width toggle setTimeout mouseenter/mouseleave

[Coen de Zeeuw]

Ik probeer een submenu een width toggle met een setTimeout te geven van bijv. 2 seconden. Ik heb al vanalles geprobeerd maar ben er nog niet uitgekomen. Hopelijk heeft iemand advies...

Voorbeeld (zonder de setTimeout): http://jsfiddle.net/vR6gY/ (hover on "Bibliotheek")

code:

jQuery('.vertical-menu .sub-menu').hide();      
jQuery('.vertical-menu ul li').mouseenter(
function(){
    setTimeout(function(){
        jQuery('.vertical-menu ul li').not(jQuery('ul', this)).stop();
        jQuery('ul', this).stop(true,true)
        .css({ 'opacity': '0' })
        .animate({ width: 'toggle', 'opacity':'1' },{ queue: false, duration: 350 }); 
    }, 2000);
})  
.mouseleave(
   function(){
    jQuery('ul', this).animate({ width: 'toggle', 'opacity':'0' },{ queue: false, duration: 350 });
});
});

[Afvalzak]

In de setTimeout kent hij "this" niet.
Je kan dus het beste eerst "this" in een variabele zetten (voor de timeout):
var self = this;

en deze vervolgens gebruiken in je setTimeout.

edit:
Check je code, hij is was(?) geupdate. Die laatste }); hoort ook nergens bij?

[ Voor 20% gewijzigd door Afvalzak op 14-08-2013 14:18 ]

[_Jeroen]

Nog eens goed gekeken naar je code.
Waarom gebruik niet gewoon de hover-functie?

JavaScript:

$('.vertical-menu ul li').hover(function() {
    var that = this;
    setTimeout(function() {    
        $('ul', that).stop()
        .css({ 'opacity': '0' })
        .animate({ width: 'toggle', 'opacity':'1' },{ queue: false, duration: 350 }); 
       }, 2000);        
}, function() {     
        $('ul', this)
        .animate({ width: 'toggle', 'opacity':'0' },{ queue: false, duration: 350 }); 
});

Fiddle demo

[ Voor 75% gewijzigd door _Jeroen op 14-08-2013 20:42 ]