jQuery hoverInent – einfach gesteuertes Hovern

Gestern ist mir das jQuery Plugin hoverIntent über den Weg gelaufen. Mit diesem Plugin lässt sich das Hovern kontrolliert steuern. Die Konfiguration ist sehr einfach:

var config = {
 over: makeTall, // function = onMouseOver callback (REQUIRED)
 timeout: 500, // number = milliseconds delay before onMouseOut
 out: makeShort // function = onMouseOut callback (REQUIRED)
}; 
$("#demo").hoverIntent( config ) 
function makeTall(){ $(this).animate({"height":75},200);} 
function makeShort(){ $(this).animate({"height":50},200);} 

Demo

Der Vorteil dieses Plugins im Vergleich zur normalen Hover funktion liegt darin, dass das Hovern zeitgesteuert kontrolliert werden kann. In der Demo können 4 Boxen gehovert werden. Fährt man schnell mit der Maus darüber, springen nicht alle Boxen auf. Erst nach einer bestimmten Zeit, welche über den Parameter «interval» verändert werden kann, greift das Hovern.