CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 253   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

17

Исчезающий через N секунд блок на jQuery

Jemand 51444 , ,
JavaScript

1. CSS

.box {
	width: 650px;
	height: 250px;
	border: 3px solid #FF4E00;
	}

2. Подключение jQuery

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

3. JavaScript

<script type="text/javascript">
	setTimeout(function(){$('.box').fadeOut('fast')},30000);  //30000 = 30 секунд
</script>

4. HTML

<div class="box">
Этот блок скоро исчезнет
</div>
«
»

Рекламная пауза

» 17 комментариев

  1. Artem
    19 декабря 2011 12:38

    Thumb up 3  Thumb down+1 2

    Прикольный скрипт! Спасибо!

  2. xalz
    9 января 2012 12:08

    Thumb up 2  Thumb down+1 1

    setTimeout(function(){$(‘.box’).fadeOut(‘fast’)},30000);

    Все гениальное просто! кстате если заменить fadeOut на fadeIn, то блок будет плавно появляться, нужно только поэкспериментировать!

    • webser
      6 марта 2012 01:32

      Thumb up 2  Thumb down+1 1

      Не прокатывает fadeIn :(
      Сделал тестовый пример – см. _your-variant_ru/test-out_html

      • Jemand
        6 марта 2012 11:04

        Thumb up 4  Thumb down+2 2

        Всё прокатывает

        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Исчезающий через N секунд блок на jQuery</title>
<style type="text/css">
.box {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -125px;
	margin-left: -325px;
	width: 650px;
	height: 250px;
	background: #FF7700;
	border: 3px solid #FF4E00;
	padding-top: 15px;
	color: #fff;
	font: 50px Tahoma;
	text-align: center;
	border-radius: 10px;
	box-shadow: 0 0 7px 1px #666;
	display: none;
	}
#timer {
	font: 150px Tahoma;
	}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript">
	setTimeout(function(){$('.box').fadeIn('fast')},3000);
</script>
<script type="text/javascript">
function timery(){
var obj=document.getElementById('timer');
obj.innerHTML--;
if(obj.innerHTML==0){setTimeout(function(){},1000);}
else{setTimeout(timery,1000);}
}
setTimeout(timery,1000);
</script>
</head>
<body>
<div class="box">
Появляющийся блок
</div>
</body>
</html>
        • webser
          6 марта 2012 23:35

          Thumb up 1  Thumb down+1 0

          Спасибо! Все отлично работает! Я сделал еще и так, что окно САМО закрывается через 30 секунд. Пример по тому-же адресу _your-variant_ru/test-out_html
          Прошу помочь сделать возможность принудительного закрытия окна при нажатии на ссылку “КОНСУЛЬТАЦИИ ON-LINE” или на ссылку ЗАКРЫТЬ
          Спасибо :)

          • Jemand
            7 марта 2012 00:51

            Thumb up 1  Thumb down+1 0

            Тут Вы и без меня разберётесь.

          • webser
            7 марта 2012 01:03

            Thumb up 1  Thumb down+1 0

            :) Я уже пробовал – не получилось… Вот по-этому и обратился к Вам. Кроме того заметил, что если прокрутить страницу вниз, то окно появляется ЗА зоной видимости, а хотелось бы выводить в ВИДИМОЙ зоне… Я не знаток jQuery – вот и обращаюсь к гуру в этой области и учусь на примерах…
            Вам дел – 2 минуты, а мне – дни…
            был бы признателен за помощь, хотя Вы и так уже много помогли… :)

          • Jemand
            8 марта 2012 14:58

            Thumb up 1  Thumb down0 1

            Пожалуйста …

            p.s. Кстати код я взял из статьи “Исчезающие блоки на jQuery“.

  3. kopec
    19 февраля 2012 21:59

    Thumb up 1  Thumb down+1 0

    1й пункт и 4й понятно, а куда вписывать 2 и 3?

  4. kopec
    21 февраля 2012 01:20

    Thumb up 1  Thumb down0 1

    Спасибо, у меня сайт на joomla сделан, index.php (в папке с шаблоном) вставляю 2,3,4., ну и css куда нужно, в итоге не очень то получается =(
    а именно от блока видна только рамка, которая расположена вверху сайта и не исчезает, а сам сайт растягивается. Жду помощи =))

  5. ARTEM
    8 июня 2012 14:05

    Thumb up 2  Thumb down+1 1

    Скажите, а как сделать так же как и в демке, чтоб визуальнео шел отщет до закрытия???

  6. Потапов Эдуард
    18 июля 2012 15:01

    Thumb up 3  Thumb down+1 2

    Спасибо , теперь можете посмотреть демонстрацию и на моем сайте! shpargalkaege.ru


Оставить комментарий