Tunda acara jquery hover?

Saya ingin menunda acara hover di jquery. Saya membaca dari sebuah file saat pengguna mengarahkan kursor ke atas tautan atau label. Saya tidak ingin peristiwa ini segera terjadi jika pengguna hanya menggerakkan mouse melintasi layar. Adakah cara untuk menunda pengaktifan acara?

Terima kasih.

Kode contoh:

$(function() {
    $('#container a').hover(function() {
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            {filename:'file.txt'},
            function() {
                $(this).appendTo('#info');
            }
         );
    },
        function() { $('#info').remove(); }
    });
});

UPDATE: (1/14/09) Setelah menambahkan plugin HoverIntent, kode di atas diubah menjadi berikut untuk mengimplementasikannya. Sangat mudah diterapkan.

$(function() {
    hiConfig = {
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', {filename:'file.txt'},
                function() {
                   $(this).appendTo('#info');
                }
             );
        }, // function = onMouseOver callback (REQUIRED)
        out: function() { $('#info').remove();  } // function = onMouseOut callback (REQUIRED)
    }
    $('#container a').hoverIntent(hiConfig)
}

Gunakan plugin hoverIntent untuk jquery: http://cherne.net/brian/resources/jquery.hoverIntent.html

Ini benar-benar sempurna untuk apa yang Anda gambarkan dan saya telah menggunakannya di hampir setiap proyek yang membutuhkan aktivasi menu mouse, dll ...

Ada satu gotcha untuk pendekatan ini, beberapa antarmuka tidak memiliki status 'hover' misalnya. browser seluler seperti safari di iphone. Anda mungkin menyembunyikan bagian penting dari antarmuka atau navigasi tanpa cara membukanya di perangkat semacam itu. Anda bisa mengatasi ini dengan CSS khusus perangkat.

Anda perlu memeriksa timer saat mengarahkan kursor. Jika tidak ada (yaitu ini adalah hover pertama), buatlah. Jika ada (yaitu ini bukan hover pertama), matikan dan mulai ulang. Atur payload pengatur waktu ke kode Anda.

$(function() {
    var timer;

    $('#container a').hover(function() {
        if(timer) {
            clearTimeout(timer);
            timer = null
        }
        timer = setTimeout(function() {
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                {filename:'file.txt'},
                function() {
                    $(this).appendTo('#info');
                }
            );
        }, 500)
    },
    // mouse out
    });
});

Saya yakin jQuery memiliki fungsi yang membungkus ini semua untuk Anda.

Edit : Ah ya, plugin jQuery untuk menyelamatkannya

Sangat setuju bahwa hoverIntent adalah solusi terbaik, tetapi jika Anda kebetulan adalah orang yang tidak beruntung yang bekerja di situs web dengan proses yang panjang dan berlarut-larut untuk persetujuan plugin jQuery, berikut adalah solusi cepat dan kotor yang bekerja dengan baik untuk saya:

$('li.contracted').hover(function () {
    var expanding = $(this);
    var timer = window.setTimeout(function () {
        expanding.data('timerid', null);

            ... do stuff

    }, 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
}, function () {
    var timerid = $(this).data('timerid');
    if (timerid != null) {
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    }
});

Yang ini hanya untuk memperluas <li> jika mouse telah berada di atasnya lebih dari 300 md.

Anda bisa menggunakan panggilan setTimeout () dengan clearTimeout () pada acara mouseout.

Pada 2016 solusi Crescent Fresh tidak berfungsi seperti yang diharapkan untuk saya, jadi saya membuat ini:

$(selector).hover(function() {
    hovered = true;
    setTimeout(function() {
        if(hovered) {
            //do stuff
        }
    }, 300); //you can pass references as 3rd, 4th etc. arguments after the delay

}, function() {
    hovered = false;
});

Solusi saya mudah. Tunda buka menu jika pengguna terus mengarahkan mouse ke object lebih dari 300ms:

var sleep = 0;
$('#category li').mouseenter(function() {
    sleep = 1;
    $('#category li').mouseleave(function() {
        sleep = 0;
    });
    var ob = $(this);
    setTimeout(function() {                         
        if(sleep) {
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        }
    }, 300);
});