Tunda acara jquery hover?


93

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)
}

1
Terima kasih telah menyediakan penggunaan untuk hoverIntent
JavaKungFu

Jawaban:


91

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.


Atau plugin ini bekerja juga seperti pesona github.com/john-terenzio/jQuery-Hover-Delay
mika

50

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


9
Terima kasih untuk solusi non-plugin!
Jrgns

4
Saya menambahkan clearTimeout (timer); timer = null; di sisi mouseout, tetapi itu bekerja dengan sempurna dan menghindari YAP (plugin lain)
Andiih

@Andiih Panggilan yang bagus, dan terima kasih telah memperkenalkan saya pada akronim "YAP".
Jon

Anda mungkin bermaksud debounce ()
Vitim.us

11

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.


Terima kasih, ternyata ini lebih berguna daripada jawaban lainnya.
Ray

6

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


1

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;
});

-2

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);
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.