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

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

Дата: Пятница, 12.10.2012, 16:52 | Сообщение # 1

Группа: Администраторы

Сообщений: 1530

Вывод на экран теста по одной букве(символу) смотрится очень эффектно и привлекает внимание,
вот как это делается:

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

Группа: Администраторы

Сообщений: 1530

Примерное тоже самое для последовательного вывода картинок

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 функция побуквенного вывода текста на экран - Архив