Появляющийся и исчезающий текст 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);
Спасибо заранее за помощь! |
мигалка на 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>
|
вот это круто! Спасибо ОГРОМНОЕ!!! Вы уже мне помогаете не один раз и всегда все очень круто! Я воспользуюсь вариантом попроще, но а второй сразу же в закладки. Спасибо еще раз! :thanks:
Извините за глупый вопрос, а за счет чего во втором варианте анимация повторяется, ведь нет никаких циклов? |
Цитата:
Не всякий язык такое поддержит. Например COS просто вылетит через некоторое время из-за переполнения стека... :lol: |
спасибо за ответ, без теории никуда.. )
|
| Часовой пояс GMT +3, время: 07:54. |