Извиняюсь, если уж совсем простой вопрос. Как спрятать или показать текст с плавными эффектами, это не так уж и сложно, но как сделать постоянный эффект анимации без обновления страницы? Т.е. например, есть блок:
Code
<div id="tblink">Блок с текстом для примера</div>
как сделать чтобы текст плавно появлялся и так же исчезал постоянно делая петлю, ну или ещё проще сказать плавно мигающий текст. Желательно пример попроще, не хотелось бы слишком нагружать страницу. Это своего рода украшательство или способ привлечь к определенному тексту внимание. Мне бы оно совсем не надо было, просто занимаюсь совместно одним сайтом, где подобный эффект выведен с помощью флэш, мне это не очень нравится и хотелось бы выводить хотя бы с помощь скрипта, совсем отговорить от мигающего текста не получилось.:) Почему-то примеры которые я находил на JavaScript слишком массивные.
Сообщение отредактировал Komoff - Суббота, 03.09.2011, 16:48
как сделать чтобы текст плавно появлялся и так же исчезал постоянно делая петлю, ну или ещё проще сказать плавно мигающий
Какой хороший вопрос, а сучётом вчерашней, и, кажется позавчерашней попойки так вообще..... Вошел я с третьего раза и то случайто, но решил, одако ... не такую уж и сложную задачку .... По сути пишем функцию которая все это будет делать - то бишь скрывать и показывать элемент, ... и .... и всё а! ставим таймер на это дело .... Короче, вот код, запускается при клике, кожно поставить на автозагрузку .... (блин, чё за клавиатура - клавиши все разбросаны ....) .... Стили:
<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>
likbezz, спасибо! Извини что побеспокоил в это суровое время.
Quote (likbezz)
а сучётом вчерашней, и, кажется позавчерашней попойки так вообще.....
Первосентября праздновал?)) В общем-то по теме, поставил мигание основываясь на твоем скрипте и дополнив чужим, и как оказалось, что это не прикольно выглядит. Поэтому не знаю, или поищу другой эффект, типа выбегающей надписи или уговорю окончательно обойтись без мигалок. Но за скрипт спасибо, может к чему-нибудь другому приделаю.
что нужно изменить в коде твоего мигающего текста, чтобы он без наведения мышки автоматически появлялся плавно, а через некоторое время плавно исчезал, либо оставался - по выбору...
что нужно изменить в коде твоего мигающего текста, чтобы он без наведения мышки автоматически появлялся плавно, а через некоторое время плавно исчезал
Типа совсем? Вот так, например:
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 - остановится и исчезнет. ...
Ок. спасибо! Еще такой вопросик, в данном коде текст сначала отображается, потом затухает, медленно появляется, потом затухает.... что нужно сделать, чтобы он начал свое появление сначала тоже плавно? просто на данный момент сначала он появляется резко спасибо!
просто на данный момент сначала он появляется резко
Просто на данный момент текст уже есть, и виден - установи тексту изначально стиль opacity:0 ... тогда будет появляться плавно. ... По теме: Прозрачность элементов при помощи CSS
Еще, прошу, подскажите, как сделать так, чтобы на html странице, каждый текст, который я хочу выделить, так появлялся. Пока что получается сделать, чтобы только один раз, выделенный мною текст, так появился.... Я так понимаю это возможно сделать, введя классы... но как это применить практически, можешь помочь с примером?
<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>
Ок. Спасибо! А возможно сделать так, чтобы к примеру появился плавно один тескт, потом плавно второй, третий и т.д. и пауза между каждым появлением была задана.... и если еще такое возможно, чтобы один(два или больше) текст из всех мигал (исчезал и появлялся - это уже сделано, только как воплотить ко всему имеющемуся)... спасибо!
Большое спасибо за именно этот код! Всё, что пробовал сделать до этого, так или иначе имело негативное влияние на другие элементы на странице, а делать слегка подмигивающими мне надо было сделать всего-то два слова.
Столкнулся с двумя проблемами: 1. "Дёргание" текста при достижении opacity=1, на примере также присутствует (css? хз...) Решил без ломания мозга - поставил максимальную opacity 0.99 2. В IE, как водится, не заработало. И вот может я сейчас глупость сморожу, ибо я пхпист: замена