jQuery автоматически скрывает элемент через 5 секунд


92

Можно ли автоматически скрыть элемент на веб-странице через 5 секунд после загрузки формы с помощью jQuery?

В принципе, у меня есть

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

Я бы хотел удалить функцию щелчка и добавить метод тайм-аута, который вызывает runEffect () через 5 секунд.

Ответы:


117
$(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 работала внутри setTimeout, вам следует обернуть ее внутрь

function() { ... }

1
Я пробовал этот код на своем сайте. Но это не сработало. Что еще мне нужно, кроме этого js-скрипта, чтобы он заработал? Пожалуйста посоветуй! Спасибо!
Jornes

1
@Jornes убедитесь, что этот скрипт находится после <script src="jquery.js"></script>на вашей странице.
Константин Таркус

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

2
Имейте в виду, что это решение нарушает работу $ ('html'). Click (function () {// щелкните за пределами $ ("# selector"). FadeOut ();});
max4ever

Спасибо за это простое решение.
Рон

Спасибо очень простое решение!
Anahit DEV

9

Можешь попробовать :

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

Если вы использовали это, ваш div будет скрыт через 30 секунд. Я тоже пробовал это, и у меня это сработало.


3

Обратите внимание, что вам может потребоваться снова отобразить текст div после его исчезновения. Таким образом, вам нужно будет также очистить, а затем снова показать элемент в какой-то момент.

Вы можете сделать это с помощью одной строки кода:

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

Если вы используете jQuery, вам не нужен setTimeout, по крайней мере, для автоматического скрытия элемента.


1

Вы используете setTimeout для функции runEffect:

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

Приветствия,


1

jQuery (". success_mgs"). show (); setTimeout (функция () {jQuery (". success_mgs"). hide ();}, 5000);


0

Вот как вы можете установить тайм-аут после щелчка.

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

// 5000 = 5 секунд = 5000 миллисекунд

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.