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

Меню

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

17

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

Jemand 43188 , ,
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. Прикольный скрипт! Спасибо!

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

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

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

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

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

          • 7 марта 2012 01:03

            Thumb up 0  Thumb down0 0

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

          • 8 марта 2012 14:58

            Thumb up 0  Thumb down-1 1

            Пожалуйста

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

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

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

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

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


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