Mungkin Anda pernah mendengar istilah jQuery HoverIntent. Ini yaitu versi ringkasnya:
// jQuery hover event with timeout by Taufik Nurrohman // https://plus.google.com/108949996304093815163/about (function($) { $.fn.hoverTimeout = function(timeout1, fn1, timeout2, fn2) { return this.each(function() { var t = null, $this = $(this); $this.hover(function() { clearTimeout(t); t = setTimeout(function() { fn1.call($this); }, timeout1); }, function() { clearTimeout(t); t = setTimeout(function() { fn2.call($this); }, timeout2); }); }); }; })(jQuery);Fungsinya yaitu untuk membuat timeout pada event .hover() jQuery.
Harap dipahami bahwa timeout berbeda dengan delay..delay() dalam jQuery memang mempunyai kemampuan untuk menahan animasi yang akan terjadi, namun beliau tidak mempunyai kemampuan untuk membatalkannya. .hoverTimeout() dipakai untuk mengatasi duduk kasus ini. Untuk lebih jelasnya, pelajari halaman demo di bawah ini:
Cara menggunakannya sama dengan .hover(). Hanya saja, setiap fungsi harus diberi awalan berupa waktu penundaan animasi (bahkan plugin ini juga bekerja untuk efek non-animasi):
/* --------------------------------------- => Dasar teladan event `hover()` jQuery $('div').hover(function() { $(this).animate({width:200}, "slow"); }, function() { $(this).animate({width:100}, "slow"); }); --------------------------------------- */ // Dengan `.hoverTimeout()` $('div').hoverTimeout(1000, function() { $(this).animate({width:200}, "slow"); }, 500, function() { $(this).animate({width:100}, "slow"); });1000 yaitu waktu tunda animasi ketika pointer memasuki elemen <div>. 500 yaitu waktu tunda animasi ketika pointer keluar dari elemen <div>.