দেরী jquery হোভার ইভেন্ট?


93

আমি জ্যাকুরিতে একটি হোভার ইভেন্টটি বিলম্ব করতে চাই। আমি কোনও ফাইল থেকে পড়ছি যখন ব্যবহারকারী কোনও লিঙ্ক বা লেবেল ধরে রাখে। আমি চাই না যে ব্যবহারকারী কেবলমাত্র পর্দা জুড়ে মাউসটি সরিয়ে নিয়ে যাওয়ার সাথে সাথেই এই ঘটনাটি ঘটুক। গুলি চালানো থেকে অনুষ্ঠানটি বিলম্ব করার কোনও উপায় আছে কি?

ধন্যবাদ.

উদাহরণ কোড:

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

আপডেট: (1/14/09) হোভারআইন্টেন্ট প্লাগইন যুক্ত করার পরে এটি প্রয়োগ করার জন্য উপরের কোডটি নিম্নলিখিতটিতে পরিবর্তন করা হয়েছিল। বাস্তবায়নের জন্য খুব সহজ।

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

4
হোভারআইন্টেন্টের জন্য ব্যবহারের জন্য ধন্যবাদ
জাভাকিংফু

উত্তর:


91

জ্যাকুরির জন্য হোভারআইন্টেন্ট প্লাগইনটি ব্যবহার করুন: http://cherne.net/brian/res ્રો/

আপনি যা বর্ণনা করেছেন তার জন্য এটি একেবারে নিখুঁত এবং আমি এটি প্রায় প্রতিটি প্রকল্পে ব্যবহার করেছি যার জন্য মেনুগুলির মাউসওভার সক্রিয়করণ ইত্যাদি প্রয়োজন ...

এই পদ্ধতির কাছে একটি গোছা আছে, কিছু ইন্টারফেস একটি 'হোভার' রাষ্ট্র যেমন উদা। আইফোনটিতে সাফারির মতো মোবাইল ব্রাউজারগুলি। আপনি ইন্টারফেসের একটি গুরুত্বপূর্ণ অংশ বা নেভিগেশন এটিকে কোনও ডিভাইসে খোলার কোনও উপায় ছাড়াই লুকিয়ে রাখতে পারেন। আপনি ডিভাইস নির্দিষ্ট সিএসএসের সাহায্যে এটি পেতে পারেন।


বা এই প্লাগইনটি গিথুব.com
মাইকা

50

হোভারে আপনাকে একটি টাইমার পরীক্ষা করা দরকার। যদি এটির অস্তিত্ব না থাকে (যেমন এটি প্রথম হোভার), এটি তৈরি করুন। এটি বিদ্যমান তাহলে (অর্থাত এই হল না প্রথম হোভার), এটি হত্যা এবং এটি পুনরায় আরম্ভ করুন। আপনার কোডটিতে টাইমার পেলোড সেট করুন।

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

আমি বাজি দিয়েছি jQuery এর একটি ফাংশন রয়েছে যা আপনার জন্য এগুলি গুটিয়ে দেয়।

সম্পাদনা : আহা হ্যাঁ, উদ্ধার করার জন্য jQuery প্লাগইন


9
একটি প্লাগ-নন সমাধানের জন্য থ্যাঙ্কস যাই হোক!
Jrgns

4
আমি একটি ক্লিয়ারটাইমআউট (টাইমার) যুক্ত করেছি; টাইমার = নাল; মাউসআউট সাইডে, তবে এটি পুরোপুরি কাজ করেছিল এবং YAP এড়িয়ে গেল (আরও একটি প্লাগইন)
Andiih

অ্যান্ডিহ গ্রেট কল এবং "YAP" সংক্ষিপ্ত বিবরণে আমাকে পরিচয় করিয়ে দেওয়ার জন্য ধন্যবাদ।
জন

আপনি সম্ভবত ডিবাউন () বলতে চান
ভিটিম.ইস

11

সম্পূর্ণরূপে সম্মত হন যে হোভারআইন্টেন্টই সেরা সমাধান, তবে আপনি যদি কোনও দুর্ভাগ্যজনক লোক হন যিনি কোনও ওয়েবসাইটে jQuery প্লাগইনগুলির অনুমোদনের জন্য দীর্ঘ এবং দীর্ঘায়িত প্রক্রিয়া নিয়ে কাজ করেন, তবে এখানে একটি দ্রুত এবং নোংরা সমাধান রয়েছে যা আমার পক্ষে ভালভাবে কাজ করেছে:

$('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> প্রসারিত করার জন্য যদি তার উপর মাউস 300 মিটারের বেশি সময় ধরে থাকে।


ধন্যবাদ, এটি অন্যান্য উত্তরের চেয়ে আরও কার্যকর বলে মনে হয়েছে।
রায় 13

6

আপনি মাউসআউট ইভেন্টে একটি ক্লিয়ারটাইমআউট () সহ একটি সেটটাইমআউট () কল ব্যবহার করতে পারেন।


1

২০১ 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;
});

-2

আমার সমাধান সহজ। ব্যবহারকারীরা 300 মাইলের উপরে মাউসেন্টার রাখলে ওপেন মেনুটি বিলম্ব করুন:

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);
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.