|
Анимация текста с помощью jQuery
|
|
| [1] Komoff [03.09.2011, 16:46] |
Извиняюсь, если уж совсем простой вопрос. Как спрятать или показать текст с плавными эффектами, это не так уж и сложно, но как сделать постоянный эффект анимации без обновления страницы? Т.е. например, есть блок: Code <div id="tblink">Блок с текстом для примера</div>
Сообщение отредактировал Komoff - Суббота, 03.09.2011, 16:48 |
|
| [2] likbezz [04.09.2011, 04:17] |
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. Интересно, какого хрена мигает весь блок по текстом???? |
|
| [3] Komoff [05.09.2011, 12:19] |
likbezz, спасибо! Извини что побеспокоил в это суровое время.  Quote (likbezz) а сучётом вчерашней, и, кажется позавчерашней попойки так вообще.....
В общем-то по теме, поставил мигание основываясь на твоем скрипте и дополнив чужим, и как оказалось, что это не прикольно выглядит. Поэтому не знаю, или поищу другой эффект, типа выбегающей надписи или уговорю окончательно обойтись без мигалок. Но за скрипт спасибо, может к чему-нибудь другому приделаю. |
|
| [4] likbezz [11.09.2011, 01:31] |
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) |
|
| [5] miixxa [07.03.2012, 21:42] |
likbezz, подскажи плз.
что нужно изменить в коде твоего мигающего текста, чтобы он без наведения мышки автоматически появлялся плавно, а через некоторое время плавно исчезал, либо оставался - по выбору...
спасибо! likbezz, likbezz, |
|
| [6] likbezz [07.03.2012, 22:10] |
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 ...
... |
|
| [7] miixxa [07.03.2012, 22:23] |
Ок. спасибо!
Еще такой вопросик, в данном коде текст сначала отображается, потом затухает, медленно появляется, потом затухает....
что нужно сделать, чтобы он начал свое появление сначала тоже плавно? просто на данный момент сначала он появляется резко
спасибо! |
|
| [8] likbezz [07.03.2012, 23:13] |
miixxa, Quote (miixxa) просто на данный момент сначала он появляется резко
Просто на данный момент текст уже есть, и виден - установи тексту изначально стиль opacity:0 ... тогда будет появляться плавно.
...
По теме:
Прозрачность элементов при помощи CSS |
|
| [9] miixxa [08.03.2012, 01:27] |
Спасибо! Получилось!
Большое спасибо!
Еще, прошу, подскажите, как сделать так, чтобы на html странице, каждый текст, который я хочу выделить, так появлялся. Пока что получается сделать, чтобы только один раз, выделенный мною текст, так появился.... Я так понимаю это возможно сделать, введя классы... но как это применить практически, можешь помочь с примером?
Спасибо! |
|
| [10] likbezz [08.03.2012, 01:39] |
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) ...
... |
|
| [11] miixxa [08.03.2012, 02:53] |
Ок. Спасибо!
А возможно сделать так, чтобы к примеру появился плавно один тескт, потом плавно второй, третий и т.д. и пауза между каждым появлением была задана.... и если еще такое возможно, чтобы один(два или больше) текст из всех мигал (исчезал и появлялся - это уже сделано, только как воплотить ко всему имеющемуся)...
спасибо! |
|
| [12] likbezz [08.03.2012, 03:48] |
miixxa, Quote (miixxa) А возможно сделать так, чтобы к примеру появился плавно один тескт, потом плавно второй, третий и т.д.
Возможно. Мне честно лень сейчас заниматься такими пустяками )
Учи JavaScript ) |
|
| [13] miixxa [08.03.2012, 13:51] |
|
Друг, выручи... |
|
| [14] hgpmm [19.11.2012, 00:10] |
Большое спасибо за именно этот код! 
Всё, что пробовал сделать до этого, так или иначе имело негативное влияние на другие элементы на странице, а делать слегка подмигивающими мне надо было сделать всего-то два слова.
Столкнулся с двумя проблемами:
1. "Дёргание" текста при достижении opacity=1, на примере также присутствует (css? хз...)
Решил без ломания мозга - поставил максимальную opacity 0.99 
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 |
|
| [15] likbezz [09.12.2012, 06:35] |
Так низя)
В IE, как водится, не заработало
В каком именно ИЕ?
Примеры выше работают даже в седьмом. В шестом не проверял ... |
|