5 सेकंड के बाद jQuery के ऑटोहाइड तत्व

92

क्या jQuery का उपयोग करके फ़ॉर्म लोड होने के 5 सेकंड बाद वेब पेज में किसी तत्व को स्वचालित रूप से छिपाना संभव है?

असल में, मुझे मिल गया है

<div id="successMessage">Project saved successfully!</div>

मैं 5 सेकंड के बाद गायब होना चाहूंगा। मैंने jQuery यूआई और छिपाने के प्रभाव को देखा है, लेकिन मुझे थोड़ी परेशानी हो रही है कि इसे जिस तरह से मैं चाहता हूं वह काम कर रहा है।

<script type="text/javascript">
        $(function() {
            function runEffect() {

                var selectedEffect = 'blind';

                var options = {};

                $("#successMessage").hide(selectedEffect, options, 500);
            };

            $("#successMessage").click(function() {
                runEffect();
                return false;
            });
        });
    </script>

मैं क्लिक फ़ंक्शन को निकालना चाहता हूं और 5 सेकंड के बाद रनआउट () कॉल करने वाली टाइमआउट विधि जोड़ें।

jquery jquery-ui

— क्रिस कॉनवे
स्रोत

115

$(function() {
    // setTimeout() function will be fired after page is loaded
    // it will wait for 5 sec. and then will fire
    // $("#successMessage").hide() function
    setTimeout(function() {
        $("#successMessage").hide('blind', {}, 500)
    }, 5000);
});

नोट : सेट टाइमआउट के अंदर आपको jQuery फ़ंक्शन कार्य करने के लिए आपको इसे अंदर लपेटना चाहिए

function() { ... }

— कोंस्टेंटिन टर्कस
स्रोत

1

मैंने अपनी वेबसाइट पर इस कोड की कोशिश की। लेकिन, यह काम नहीं किया। इस js स्क्रिप्ट के अलावा, मुझे और क्या काम करने की ज़रूरत है? कृपया सलाह दें! धन्यवाद!

— जोर्न्स

1

@ जॉर्न्स यह सुनिश्चित करते हैं कि यह स्क्रिप्ट <script src="jquery.js"></script>आपके पेज पर स्थित है ।

— कॉन्स्टेंटिन टर्कस

217

$('#selector').delay(5000).fadeOut('slow');

— justmeol
स्रोत

2

सावधान रहें कि यह समाधान $ ('html') को तोड़ता है। क्लिक करें (फ़ंक्शन () {// $ बाहर क्लिक करें ("# लोडर")। fadeOut ();});

— अधिकतम 4

इस सरल समाधान के लिए धन्यवाद।

— रॉन

बहुत सरल समाधान धन्यवाद!

— आहट DEV

9

तुम कोशिश कर सकते हो :

setTimeout(function() {
  $('#successMessage').fadeOut('fast');
}, 30000); // <-- time in milliseconds

अगर आपने इसका इस्तेमाल किया तो आपका डिव 30 सेकेंड के बाद छुप जाएगा। मैंने भी यह कोशिश की और यह मेरे लिए काम कर गया।

— माशूक़
स्रोत

3

कृपया ध्यान दें कि गायब होने के बाद आपको फिर से div टेक्स्ट प्रदर्शित करने की आवश्यकता हो सकती है। तो आपको खाली भी करना होगा और फिर किसी बिंदु पर तत्व को फिर से दिखाना होगा।

आप इसे कोड की 1 पंक्ति के साथ कर सकते हैं:

$('#element_id').empty().show().html(message).delay(3000).fadeOut(300);

यदि आप jQuery का उपयोग कर रहे हैं, तो आपको सेटटाइमआउट की आवश्यकता नहीं है, कम से कम एक तत्व को ऑटोहाइड करने के लिए नहीं।

— क्रिस
स्रोत

1

आप रनटाइम फ़ंक्शन पर सेटटाइमआउट का उपयोग करते हैं:

function runEffect() {
    setTimeout(function(){
        var selectedEffect = 'blind';
        var options = {};
        $("#successMessage").hide(selectedEffect, options, 500)
     }, 5000);
}

— सीएमएस
स्रोत

1

मुझे लगता है, आप भी कुछ ऐसा कर सकते हैं ...

setTimeout(function(){
    $(".message-class").trigger("click");
}, 5000);

और घटना पर अपने एनिमेटेड प्रभाव पर क्लिक करें ...

$(".message-class").click(function() {
    //your event-code
});

अभिवादन,

— Petertje
स्रोत

1

jQuery ( "success_mgs।") दिखाने ()।; setTimeout (फ़ंक्शन () {jQuery ("। success_mgs")। Hide ();}; 5000);

— user3778023
स्रोत

0

इस प्रकार आप क्लिक करने के बाद टाइमआउट सेट कर सकते हैं।

$(".selectorOnWhichEventCapture").on('click', function() {
    setTimeout(function(){
        $(".selector").doWhateverYouWantToDo();
    }, 5000);
});

// 5000 = 5sec = 5000 मिलिसेक

— आकाश पाहुजा
स्रोत