jQuery otomatik gizleme öğesi 5 saniye sonra

Form jQuery kullanılarak yüklendikten 5 saniye sonra bir web sayfasındaki bir öğeyi otomatik olarak gizlemek mümkün müdür?

Temel olarak, bende var

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

5 saniye sonra kaybolmak istiyorum. JQuery kullanıcı arayüzüne ve gizleme efektine baktım, ancak istediğim gibi çalışmasını sağlamakta biraz sorun yaşıyorum.

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

                var selectedEffect = 'blind';

                var options = {};

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

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

Tıklama işlevinin kaldırılmasını ve 5 saniye sonra runEffect () öğesini çağıran bir zaman aşımı yöntemi eklemesini istiyorum.

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

Not : jQuery işlevinin setTimeout içinde çalışmasını sağlamak için onu içine sarmalısınız.

function() { ... }

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

Deneyebilirsin :

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

Bunu kullandıysanız, div'iniz 30 saniye sonra gizlenecek, bunu da denedim ve benim için çalıştı.

Kaybolduktan sonra div metnini tekrar görüntülemeniz gerekebileceğini lütfen unutmayın. Yani bir noktada öğeyi boşaltmanız ve ardından yeniden göstermeniz gerekecek.

Bunu 1 satır kodla yapabilirsiniz:

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

JQuery kullanıyorsanız, en azından bir öğeyi otomatik olarak gizlememek için setTimeout'a ihtiyacınız yoktur.

RunEffect işlevinizde setTimeout'u kullanırsınız:

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

Sanırım siz de şöyle bir şey yapabilirsiniz ...

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

ve olay tıklama üzerinde animasyon efektlerinizi yapın ...

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

Selamlar,

jQuery (". success_mgs"). show (); setTimeout (function () {jQuery (". success_mgs"). hide ();}, 5000);

Tıkladıktan sonra zaman aşımını bu şekilde ayarlayabilirsiniz.

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

// 5000 = 5sn = 5000 milisaniye