Элемент jQuery autohide через 5 секунд

Question

Элемент jQuery autohide через 5 секунд

77

Можно ли автоматически скрыть элемент на веб-странице через 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 секунд.

много граций!

Chris Conway 25 март 2009, в 19:39

Источник

Теги:

jquery

jquery-ui

7 ответов

161

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

justmeol 05 нояб. 2010, в 20:31

2

Имейте в виду, что это решение ломает $ ('html'). Click (function () {// click outside $ ("# selector"). FadeOut ();});
max4ever 21 март 2013, в 14:02
0

Спасибо за это простое решение.
Ron 23 июнь 2015, в 15:12
0

Спасибо, очень простое решение!
Anahit DEV 06 авг. 2015, в 05:35

Показать ещё 1 комментарий

7

Вы можете попробовать:

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

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

sweety 02 июль 2015, в 07:15

1

Я думаю, вы могли бы также сделать что-то вроде...

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

и выполните ваши анимированные эффекты при нажатии на событие...

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

Привет,

Petertje 29 янв. 2014, в 10:37

1

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

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

CMS 25 март 2009, в 21:06

0

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

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

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

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

Cris 07 нояб. 2017, в 22:28

0

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

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

//5000 = 5sec = 5000 milisec

Aakash Pahuja 05 июль 2017, в 13:06

Ещё вопросы

Имейте в виду, что это решение ломает $ ('html'). Click (function () {// click outside $ ("# selector"). FadeOut ();});

Konstantin Tarkus · Accepted Answer · 2009-03-25T21-23-00.000Z

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

Я попробовал этот код на моем сайте. Но это не сработало. Кроме этого сценария JS, что еще мне нужно, чтобы он работал? Пожалуйста посоветуй! Спасибо!
@Jornes убедитесь, что этот скрипт расположен после <script src="jquery.js"></script> на вашей странице.