Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.10.2014, 19:18
Кандидат Javascript-наук
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 145

Изменить схему работы цикла
jQuery.fn.fade_img = function (ops) {
  var jQueryelem = this;
  var res = jQuery.extend({ delay: 100, speed: 100 }, ops);
  for (var i=0, pause=0, l=jQueryelem.length; i<l; i++, pause+=res.delay) {
   jQueryelem.eq(i).delay(pause).fadeIn(res.speed);
  }
  return jQueryelem;
 };
 jQuery('.fade').fade_img();


суть такая что по очереди появляются объекты с классом fade

а мне нужно добавить условия чтоб они после того как все появятся была пауза 2000мс а потом они все сразу стали невидимые. а потом снова начался цикл с поочередным появлением.
Ответить с цитированием
  #2 (permalink)  
Старый 20.10.2014, 19:24
Кандидат Javascript-наук
Отправить личное сообщение для ufaclub Посмотреть профиль Найти все сообщения от ufaclub
 
Регистрация: 27.11.2010
Сообщений: 145

Вот рабочий пример.
http://jsfiddle.net/ufaclub/5dwy8x68/1/
Ответить с цитированием
  #3 (permalink)  
Старый 20.10.2014, 20:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,328

ufaclub,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
.fade {
    display: none;
}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
  	$(function()
  	  {
  	    jQuery.fn.fade_img = function (ops) {
  	      var jQueryelem = this;
  	      var res = jQuery.extend({delay: 500, speed: 500, pause : 2000}, ops);
  	      jQueryelem.each(function(indx, element)
  	        {
  	          $(this).delay(indx*res.delay).fadeIn(res.speed);
  	        }
  	      );
  	      jQueryelem.last().queue(function (next)
  	        {
  	          jQueryelem.delay(res.pause).fadeOut().fade_img();
  	          next();
  	        }
  	      );
  	      return jQueryelem;
  	    };
  	    jQuery('.fade').fade_img();
  	  }
  	);
  </script>
</head>

<body>
<div class="fade">1</div>
<div class="fade">2</div>
<div class="fade">3</div>
<div class="fade">4</div>
<div class="fade">5</div>
<div class="fade">6</div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить класс родительского элемента STyLe Общие вопросы Javascript 1 29.05.2014 19:21
Как изменить цвет и размер шрифта в Java savas332 Серверные языки и технологии 3 09.01.2014 15:02
Принцип работы цикла for stp008 Общие вопросы Javascript 4 29.05.2012 11:22
как изменить css свойсво нескольких елементов? IIIgun Общие вопросы Javascript 17 12.08.2011 11:20
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 12:08