jquery функция побуквенного вывода текста на экран jquery функция побуквенного вывода текста на экран - Архив
jquery функция побуквенного вывода текста на экран
DownLoad_Free

jquery функция побуквенного вывода текста на экран - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » jquery функция побуквенного вывода текста на экран
jquery функция побуквенного вывода текста на экран
Дата: Пятница, 12.10.2012, 16:52 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524
Вывод на экран теста по одной букве(символу) смотрится очень эффектно и привлекает внимание,
вот как это делается:

jQuery Скрипт
--------------------------------------------------------
$.fn.animateText = function(delay, klass) {

var text = this.text();
var letters = text.split('');

return this.each(function(){
var $this = $(this);
$this.html(text.replace(/./g, '<span class="letter">$&</span>'));
$this.find('span.letter').each(function(i, el){
setTimeout(function(){ $(el).addClass(klass); }, delay * i);
});
});

};

$('#p1').mouseup(function(){
$(this).animateText(5, 'opacity');
});
-----------------------------------------------

Css

#one .opacity {
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
opacity: 1;
}

Рабочий пример: http://jsbin.com/ogevob/52/edit
 
Дата: Пятница, 12.10.2012, 16:56 | Сообщение # 2
Группа: Администраторы
Сообщений: 1524
Примерное тоже самое для последовательного вывода картинок

jquery

---------------------------------------------------
$.fn.fadeAll = function (ops) {
var o = $.extend({
delay: 500,
speed: 500,
ease: 'swing' // Other requires easing plugin
}, ops);
var $el = this;
for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) {
$el.eq(i).delay(d).fadeIn(o.speed, o.ease);
}
return $el;
};

$('img').fadeAll();

Css
-----------------------------------------
img { display: none; }

Рабочий пример: http://jsbin.com/opihux/2/edit
 
Архив » История мировых и локальных событий » История развития сайта » jquery функция побуквенного вывода текста на экран
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!