Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2015, 11:25
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

Появляющийся и исчезающий текст jquery
Прошу помощи при написании скрипта, который делает анимацию текста - непрерывное плавное чередование текста в параграфе.
Пыталась реализовать, но что-то я тут запуталась и все работает с ошибками.
<h3 id="text">Приветствую на нашем сайте</h3>

var message = ['Приветствую на нашем сайте', 'желаем хорошего дня'],
		i = message.length,
		i = 0,
		h = $('#text');
		setInterval(function(){			
			var r = new RegExp(message[i]);
			if(typeof message[++i] == 'undefined') i = 0;
			h.fadeOut(1000).text( h.text().replace(r, message[i])).fadeIn(1000);
		}, 4000);



Спасибо заранее за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2015, 14:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

мигалка на jQuery с градиентом.htm
helgajijka,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  h3  {
     margin: 30px  auto;
     text-align: center;
     font-family: Courier;
     font-size: 48px;
     background-color: #66FFCC;
     font-style: italic;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var message = ["Приветствую на нашем сайте", "желаем хорошего дня"],
        $h3 = $("#text");

    function gradient(from, to, num) {
        var arr = [];
        num--;
        for (var i = 0; i <= num; i++) {
            var color = [],
                l = from.length;
            for (var k = 0; k < l; k++) {
                color[k] = (to[k] - from[k]) * (i / num) + from[k];
                k < 3 && (color[k] = Math.round(color[k]))
            }
            arr[i] = "rgb" +
                (l == 4 ? "a(" : "(") + color + ")"
        }
        return arr
    }

    function randomRGBComponent() {
        return Math.round(Math.random() * 255)
    }

    function randomRGBColor() {
        return [randomRGBComponent(), randomRGBComponent(), randomRGBComponent()]
    }

    function show() {
        var text = message.shift(),
            from = randomRGBColor(),
            to = randomRGBColor(),
            color = [255 - from[0], 255 - from[1], 255 - from[2]];
        message.push(text);
        $h3.html("").css({
            "background-color": "rgb(" + color + ")"
        });
        var base = gradient(from, to, text.length);
        $.each(base, function(indx, el) {
            $("<span/>", {
                text: text.charAt(indx),
                css: {
                    "color": el
                }
            }).appendTo($h3)
        });
        $h3.fadeIn(800, hide)
    }

    function hide() {
        $h3.delay(3E3).fadeOut(300, show)
    }
    show()
});
  </script>
</head>

<body>

<h3 id="text">Приветствую на нашем сайте</h3>


</body>

</html>


ну можно конечно попроще
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  h3  {
     margin: 30px  auto;
     text-align: center;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var message = ['Приветствую на нашем сайте', 'желаем хорошего дня'], $h3 = $('#text');
       function show()
       {  var text = message.shift();
          message.push(text)
          $h3.text(text).fadeIn(500, hide);
       }
       function hide()
       {
         $h3.delay(1500).fadeOut(300, show)
       }
      show()
});


  </script>
</head>

<body>

<h3 id="text">Приветствую на нашем сайте</h3>


</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2015, 15:38
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

вот это круто! Спасибо ОГРОМНОЕ!!! Вы уже мне помогаете не один раз и всегда все очень круто! Я воспользуюсь вариантом попроще, но а второй сразу же в закладки. Спасибо еще раз!

Извините за глупый вопрос, а за счет чего во втором варианте анимация повторяется, ведь нет никаких циклов?

Последний раз редактировалось helgajijka, 02.07.2015 в 15:48.
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2015, 16:14
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от helgajijka
а за счет чего во втором варианте анимация повторяется, ведь нет никаких циклов?
Из-за применения колбек-функций. Именно они создают "цикличность"...

Не всякий язык такое поддержит. Например COS просто вылетит через некоторое время из-за переполнения стека...
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2015, 17:17
Интересующийся
Отправить личное сообщение для helgajijka Посмотреть профиль Найти все сообщения от helgajijka
 
Регистрация: 23.03.2015
Сообщений: 27

спасибо за ответ, без теории никуда.. )
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавно появляющийся текст в шапке сайта Серега187 Элементы интерфейса 3 08.05.2014 14:53
нужно заставить одновременно работать слайдер и модальное окно обратной связи kvant355 Javascript под браузер 3 22.07.2013 16:34
Изменение класса Div-ов по клику... Torch`Ok Events/DOM/Window 22 12.09.2012 16:43
Отследить клик по дочернему объекту AllanZ jQuery 3 05.09.2012 12:38
jQuery Dialog: не выделяется текст заголовка someLogin Элементы интерфейса 0 10.08.2011 22:15