HoverTimeout, Plugin Kecil Seperti HoverIntent

Mungkin Anda pernah mendengar istilah JQuery HoverIntent. Ini adalah 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 adalah untuk menciptakan timeout pada event .hover() JQuery.

Harap dipahami bahwa timeout berbeda dengan delay.
.delay() dalam JQuery memang memiliki kemampuan untuk menahan animasi yang akan terjadi, namun dia tidak memiliki kemampuan untuk membatalkannya. .hoverTimeout() digunakan untuk mengatasi masalah ini. Untuk lebih jelasnya, pelajari halaman demo di bawah ini:

Lihat Demo

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 pola 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 adalah waktu tunda animasi saat pointer memasuki elemen <div>. 500 adalah waktu tunda animasi saat pointer keluar dari elemen <div>.