Как я могу это сделать? - Анимированная цитата - JQuery

Question

Пожалуйста, смотрите это изображение:

Мне нужно что-то вроде этого, которое будет показывать, что цитаты постепенно идут друг на друга. Я не хочу использовать flash и хочу, чтобы клиент как можно проще обновлялся. У кого-нибудь есть предложения?

Answer 1

Я бы предложил использовать jquery animate, http://api.jquery.com/animate/ или просто fadein, http://api.jquery.com/fadeIn/

Вращать кавычки так, как вы хотите, разместите их поверх друг друга с помощью z-index (не забывайтедобавить position: relative или position: absolute) и скрыть их.

Пример поворота Css3:

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Если вам нужно, чтобы он работал для браузеров, не поддерживающих css3, выможет просто вращать прозрачные .png: s в PS, например.

Что касается постепенного исчезновения в кавычках, я бы сделал что-то вроде этого:

$(".quotecontainer img").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});