• Страница 1 из 1
  • 1
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Анимация текста с помощью jQuery (Мигающий тест. Как сделать)
Анимация текста с помощью jQuery
Дата: Суббота, 03.09.2011, 16:46 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


Извиняюсь, если уж совсем простой вопрос. Как спрятать или показать текст с плавными эффектами, это не так уж и сложно, но как сделать постоянный эффект анимации без обновления страницы? Т.е. например, есть блок:
Code
<div id="tblink">Блок с текстом для примера</div>
как сделать чтобы текст плавно появлялся и так же исчезал постоянно делая петлю, ну или ещё проще сказать плавно мигающий текст. Желательно пример попроще, не хотелось бы слишком нагружать страницу. Это своего рода украшательство или способ привлечь к определенному тексту внимание. Мне бы оно совсем не надо было, просто занимаюсь совместно одним сайтом, где подобный эффект выведен с помощью флэш, мне это не очень нравится и хотелось бы выводить хотя бы с помощь скрипта, совсем отговорить от мигающего текста не получилось.:) Почему-то примеры которые я находил на JavaScript слишком массивные.


Сообщение отредактировал Komoff - Суббота, 03.09.2011, 16:48
 
Дата: Воскресенье, 04.09.2011, 04:17 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Komoff,
Quote (Komoff)
как сделать чтобы текст плавно появлялся и так же исчезал постоянно делая петлю, ну или ещё проще сказать плавно мигающий

Какой хороший вопрос, а сучётом вчерашней, и, кажется позавчерашней попойки так вообще.....
Вошел я с третьего раза и то случайто, но решил, одако ... не такую уж и сложную задачку ....
По сути пишем функцию которая все это будет делать - то бишь скрывать и показывать элемент, ... и .... и всё а! ставим таймер на это дело ....
Короче, вот код, запускается при клике, кожно поставить на автозагрузку .... (блин, чё за клавиатура - клавиши все разбросаны ....) ....
Стили:
Code
<style type="text/css">
#tblink{text-align:center; font:48px/1.3 Georgia,serif}
</style>


Функция:
Code
<script type="text/javascript">
function tblink(){
var obj=$('#tblink');
($('#tblink').is(":hidden"))?obj.fadeIn():obj.fadeOut()
setTimeout("tblink('700')",0);
};
</script>


HTML:
Code
<h1 id="tblink" onclick="tblink();return false;">Блок с текстом для примера</h1>

...

Пример .... (мигающий текст)

P.S. Блин, какое хреновое похмелье .....

P.P.S. Интересно, какого хрена мигает весь блок по текстом????


 
Дата: Понедельник, 05.09.2011, 12:19 |
Полковник
Группа: Помощники
Сообщений: 210
Награды: 0
Репутация: 11
Статус: Offline


likbezz, спасибо! Извини что побеспокоил в это суровое время. biggrin
Quote (likbezz)
а сучётом вчерашней, и, кажется позавчерашней попойки так вообще.....
Первосентября праздновал?))
В общем-то по теме, поставил мигание основываясь на твоем скрипте и дополнив чужим, и как оказалось, что это не прикольно выглядит. Поэтому не знаю, или поищу другой эффект, типа выбегающей надписи или уговорю окончательно обойтись без мигалок. Но за скрипт спасибо, может к чему-нибудь другому приделаю.


 
Дата: Воскресенье, 11.09.2011, 01:31 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Quote (likbezz)
☑ Пример .... (мигающий текст)

Какой неудачный пример ... ))) Вот что значит “голова не соображает” )))
Для подобного гораздо лучше подходит $.animate({opacity:'1'})
...
Типа так:

Скрипт:
Code
<script type="text/javascript">
function tblink(){var obj=$('#tblink');
($('#tblink').css('opacity')=='0')?obj.stop(true).animate({opacity:'1'},300):obj.animate({opacity:'0'},300)
setTimeout("tblink()",400);
};
</script>


HTML:
Code
<h1 id="tblink" onclick="tblink();return false;">Блок с текстом для примера</h1>

...

Пример ($.animate({opacity:'1'}))
....

Или типа вот этого: Радужный текст. Эффект плавного изменения цвета текста. (JavaScript. rainbowText)


 
Дата: Среда, 07.03.2012, 21:42 |
miixxa
Рядовой
Группа: Зарегистрированные
Сообщений: 5
Награды: 0
Репутация: 0
Статус: Offline


likbezz, подскажи плз.

что нужно изменить в коде твоего мигающего текста, чтобы он без наведения мышки автоматически появлялся плавно, а через некоторое время плавно исчезал, либо оставался - по выбору...

спасибо! likbezz, likbezz,


 
Дата: Среда, 07.03.2012, 22:10 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


miixxa,
Quote (miixxa)
что нужно изменить в коде твоего мигающего текста, чтобы он без наведения мышки автоматически появлялся плавно, а через некоторое время плавно исчезал

Типа совсем?
Вот так, например:
Code
<h1 id="tblink">Блок с текстом для примера</h1>
<script type="text/javascript">
function tblink(n){var obj=$('#tblink');
if(n){
($('#tblink').css('opacity')=='0')?obj.stop(true).animate({opacity:'1'},300):obj.animate({opacity:'0'},300)
setTimeout("tblink("+(n-1)+")",600);
};};tblink(11);
</script>

Где:
tblink(11); «11» - кол-во миганий умноженное на два. Если число четное - остановится и будет виден, если НЕ четное - 7,11,13 - остановится и исчезнет.
...

Типа: Пример .... (мигающий текст) $.animate({opacity:'1'}) v2 ...
...


 
Дата: Среда, 07.03.2012, 22:23 |
miixxa
Рядовой
Группа: Зарегистрированные
Сообщений: 5
Награды: 0
Репутация: 0
Статус: Offline


Ок. спасибо!
Еще такой вопросик, в данном коде текст сначала отображается, потом затухает, медленно появляется, потом затухает....
что нужно сделать, чтобы он начал свое появление сначала тоже плавно? просто на данный момент сначала он появляется резко
спасибо!


 
Дата: Среда, 07.03.2012, 23:13 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


miixxa,
Quote (miixxa)
просто на данный момент сначала он появляется резко

Просто на данный момент текст уже есть, и виден - установи тексту изначально стиль opacity:0 ... тогда будет появляться плавно.
...
По теме:
Прозрачность элементов при помощи CSS


 
Дата: Четверг, 08.03.2012, 01:27 |
miixxa
Рядовой
Группа: Зарегистрированные
Сообщений: 5
Награды: 0
Репутация: 0
Статус: Offline


Спасибо! Получилось!

Большое спасибо!

Еще, прошу, подскажите, как сделать так, чтобы на html странице, каждый текст, который я хочу выделить, так появлялся. Пока что получается сделать, чтобы только один раз, выделенный мною текст, так появился.... Я так понимаю это возможно сделать, введя классы... но как это применить практически, можешь помочь с примером?

Спасибо!


 
Дата: Четверг, 08.03.2012, 01:39 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


miixxa,
Code
<h1 class="tblink">Блок с текстом для примера 1</h1>
<h1 class="tblink">Блок с текстом для примера 2</h1>
<h1 class="tblink">Блок с текстом для примера 3</h1>
<h1 class="tblink">Блок с текстом для примера 4</h1>
<h1 class="tblink">Блок с текстом для примера 5</h1>

Code
<script type="text/javascript">
function tblink(n){
if(n){
var obj=$('.tblink');
(obj.css('opacity')=='0')?obj.stop(true).animate({opacity:'1'},300):obj.animate({opacity:'0'},300)
setTimeout("tblink("+(n-1)+")",600);
};};
$('.tblink').css('opacity','0');
tblink(10);
</script>

Пример: Мигающий текст $.animate({opacity:'1'}) v3 ... ...
...
Или вот так:
Мигающий текст ($.animate({opacity:'1'})) v4 + rand(m,n) ...
...


 
Дата: Четверг, 08.03.2012, 02:53 |
miixxa
Рядовой
Группа: Зарегистрированные
Сообщений: 5
Награды: 0
Репутация: 0
Статус: Offline


Ок. Спасибо!
А возможно сделать так, чтобы к примеру появился плавно один тескт, потом плавно второй, третий и т.д. и пауза между каждым появлением была задана.... и если еще такое возможно, чтобы один(два или больше) текст из всех мигал (исчезал и появлялся - это уже сделано, только как воплотить ко всему имеющемуся)...
спасибо!


 
Дата: Четверг, 08.03.2012, 03:48 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


miixxa,
Quote (miixxa)
А возможно сделать так, чтобы к примеру появился плавно один тескт, потом плавно второй, третий и т.д.

Возможно. Мне честно лень сейчас заниматься такими пустяками )
Учи JavaScript )


 
Дата: Четверг, 08.03.2012, 13:51 |
miixxa
Рядовой
Группа: Зарегистрированные
Сообщений: 5
Награды: 0
Репутация: 0
Статус: Offline


Друг, выручи...

 
Дата: Понедельник, 19.11.2012, 00:10 |
hgpmm
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Большое спасибо за именно этот код! smile
Всё, что пробовал сделать до этого, так или иначе имело негативное влияние на другие элементы на странице, а делать слегка подмигивающими мне надо было сделать всего-то два слова.

Столкнулся с двумя проблемами:
1. "Дёргание" текста при достижении opacity=1, на примере также присутствует (css? хз...)
Решил без ломания мозга - поставил максимальную opacity 0.99 biggrin
2. В IE, как водится, не заработало. И вот может я сейчас глупость сморожу, ибо я пхпист: замена
Code
animate({opacity:'1'},300):obj.animate({opacity:'0.'},300)

на
Code
animate({opacity:'1'; filter:alpha(opacity=100);},300):obj.animate({opacity:'0'; filter:alpha(opacity=0);},300)

привела к тому, что вообще перестал работать скрипт. Так нельзя?


Сообщение отредактировал hgpmm - Понедельник, 19.11.2012, 00:13
 
Дата: Воскресенье, 09.12.2012, 06:35 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Так нельзя?

Так низя)
В IE, как водится, не заработало

В каком именно ИЕ?
Примеры выше работают даже в седьмом. В шестом не проверял ...


 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Анимация текста с помощью jQuery (Мигающий тест. Как сделать)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия