Domanda

Sto lavorando su un menu a discesa jQuery che svanisce quando si posiziona il mouse sulle voci di primo livello. Voglio impostarlo in modo che quando si sposta il mouse via il menu non scompare immediatamente. Ho questo codice:

$(document).ready(function(){
  $('ul#menu > li').hover(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
      setTimeout( function(){
        alert('fadeout');
        $(this).find('>ul').fadeOut('fast')
        }, 1000 );
    }  
  );
});

Dopo un secondo l'allarme accade, ma il menu non è sbiadito fuori.

È stato utile?

Soluzione

window.setTimeout (), quindi questo fa riferimento all'oggetto finestra.

// mouseout
function(){
  var el=this;
  setTimeout( function(){
    alert('fadeout');
    $(el).find('>ul').fadeOut('fast')
    }, 1000 );
}  

Altri suggerimenti

Dai un'occhiata alla hoverIntent . Vi darà un maggiore controllo del comportamento degli eventi mouseover / mouseout dalla configurazione:

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
};

$(document).ready(function(){
  $('ul#menu > li').hoverIntent(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
       $(this).find('>ul').fadeOut('fast');
    }  
  );
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top