تأخير مسج تحوم الحدث ؟

Question

أود أن تأخير تحوم الحدث في مسج.أنا أقرأ من ملف المستخدم عندما تحوم فوق ارتباط أو التسمية.أنا لا أريد هذا الحدث أن يحدث على الفور في حال كان المستخدم هو مجرد تحريك الماوس عبر الشاشة.هل هناك طريقة لتأخير حدث من اطلاق النار ؟

شكرا لك.

رمز المثال:

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

تحديث: (1/14/09) بعد إضافة HoverIntent المساعد رمز أعلاه تم تغيير التالي لتنفيذ ذلك.بسيطة جدا لتنفيذ.

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

Answer 1

استخدام hoverIntent المساعد مسج: http://cherne.net/brian/resources/jquery.hoverIntent.html

انها مثالية تماما على ما تصفون و كنت استخدمه على ما يقرب من كل المشاريع التي تتطلب تمرير الماوس تفعيل القوائم الخ...

هناك واحد مسكتك على هذا النهج بعض واجهات تخلو من تحوم الدولة على سبيل المثال.المحمول المتصفحات مثل سفاري على اي فون.قد يكون مختبئا جزءا هاما من واجهة أو الملاحة مع أي وسيلة فتحه على مثل هذا الجهاز.هل يمكن الحصول على هذه الجولة مع جهاز معين CSS.

Answer 2

تحتاج إلى التحقق من توقيت على التحويم.إذا كان غير موجود (أي هذا هو أول تحوم), إنشاء.إذا كان موجودا (أي هذا هو لا أول تحوم) ، قتله و إعادة تشغيله.تعيين جهاز ضبط الوقت الحمولة إلى التعليمات البرمجية الخاصة بك.

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

أراهن مسج لديه وظيفة التي يلتف هذا كل شيء بالنسبة لك.

تحرير:آه نعم ، البرنامج المساعد مسج أن الإنقاذ

Answer 3

أتفق تماما أن hoverIntent هو الحل الأفضل, ولكن إذا كنت يحدث ليكون مؤسفة الاحمق الذي يعمل على الموقع مع طويلة الأمد عملية الموافقة على الإضافات مسج, وهنا سريعة وقذرة الحل الذي عملت بشكل جيد بالنسبة لي:

$('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);
    }
});

هذا واحد فقط من أجل توسيع <li> إذا كان الماوس على ذلك لمدة أطول من 300ms.

Answer 4

هل يمكن استخدام setTimeout() الاتصال مع clearTimeout() على mouseout الحدث.

Answer 5

في عام 2016 الهلال الطازجة الحل لم يعمل كما هو متوقع بالنسبة لي ، لذلك خطرت لي هذه:

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

Answer 6

الحل السهل.تأخير فتح القائمة إذا كان المستخدم حفظ mouseenter على الكائنات على 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);
});