amiron

Не за что!

Лично мне некомфортно то, что они прыжками сдвигаются. Вот код для того, чтобы первый появлялся не плавно, а сразу, после того как плавно исчезает последний $(document).ready(function(){ var first = 0; var speed = 700; var pause = 3500; function removeFirst(){ first = $('#listticker li:last').html(); $('#listticker li:last').remove(); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; // Задаём анимацию последнему видимому комменту - 4му. $('#listticker ul').find("li:eq(2)").animate({opacity: "0"}, "800", function() { $('#listticker ul').prepend(last); $('#listticker li:first').show(); }) } interval = setInterval(removeFirst, pause); }); Еще небольшие изменения в первой функции сделал, они на видимую часть никак не влияют Сейчас попробовал, мне больше понравилось с плавным сдвигом вниз Код $(document).ready(function(){ var first = 0; var speed = 700; var pause = 3500; function removeFirst(){ first = $('#listticker li:last').html(); $('#listticker li:last').remove(); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; // Задаём анимацию последнему видимому комменту - 4му. $('#listticker ul').find("li:eq(2)").animate({opacity: "0"}, "800", function() { $('#listticker ul').prepend(last); $('#listticker li:first').css({opacity: "0"}).slideDown(function(){ $(this).css({opacity: "1"}); }); }) } interval = setInterval(removeFirst, pause); }); ой, четверочку там поставьте во второй функции , вместо двойки - li:eq(4)

А что значит "убрать прозрачность"? Что должно происходить? Значит, сейчас имеем: Последний видимый плавно исчезает, список сдвигается вниз, плавно появляется первый. Что должно измениться?

Чтобы оформить анимацию для последнего видимого коммента, замените в функкции addLast() следующее: $('#listticker ul').prepend(last) на $('#listticker ul').find("li:eq(4)").animate({opacity: "0"}, "slow").end().prepend(last); т.е. находим последний видимый элемент по порядковому номеру (считать начинаем с 0, у нас получается пять постов видно, значит номер последнего - 4) и задаём ему анимацию. Продолжительность анимации, опять же, можете настроить сами - замените "slow" на миллисекунды (напр. 500, 800 и т.п) Если хотите убрать плавность движения вниз, соответственно уберите то, о чём я писал в прошлом посте Заказы, к сожалению, не принимаю. С jquery можно и из интереса повозиться, если время позволяет. А если возникают трудности - пишите на форум, люди вам помогут, или в личку.

А, ну это ж совсем жеж другое дело. Хорошо что ссылку выложили. Здесь, как вы говорите, последний пункт, последний только визуально. У основного контейнера просто область видимости скрыта, так что настоящий последний находится за пределами видимости. С видимым "последним" мы ничего не сделаем. Здесь другой вариант можно сделать: появление первого пункта дооформить. Я бы сделал так: сдвинул бы плавно видимые пункты вниз и вставил, тоже плавно, первый на место. Можно реализовать так: после $('#listticker li:first') вставить .css({opacity: "0"}) .slideDown() скорость смещения списка вниз можете регулировать - вставить в скобки в slideDown(), пример - slideDown(500) или slideDown(800) ТО, получается: $(document).ready(function(){ var first = 0; var speed = 700; var pause = 3500; function removeFirst(){ first = $('#listticker li:last').html(); $('#listticker li:last') .animate({opacity: 0}, speed) .fadeOut('slow', function() {$(this).remove();}); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; $('#listticker ul').prepend(last) $('#listticker li:first') .css({opacity: "0"}) .slideDown() .animate({opacity: 1}, speed) .fadeIn('slow') } interval = setInterval(removeFirst, pause); }); Можно, конечно, и с анимацию для видимого последнего сделать (именно для конкретного дизайна), но это чуть больше возни

Не знаю, я вот попробовал на странице, у меня как раз нижний и растворяется, потом появляется вверху. Проблему обнаружить не могу.

Честно говоря, не понял, что требуется Раньше было поведение: верхний растворяется, перемещается вниз, плавно появляется (внизу) (код, который вы приводили в первом посте) После описанных (мной) изменений: нижний растворяется, перемещается вверх, плавно появляется (вверху) (код ниже) $(document).ready(function(){ var first = 0; var speed = 700; var pause = 3500; function removeFirst(){ first = $('#listticker li:last').html(); $('#listticker li:last') .animate({opacity: 0}, speed) .fadeOut('slow', function() {$(this).remove();}); addLast(first); } function addLast(first){ last = '<li style="display:none">'+first+'</li>'; $('#listticker ul').prepend(last) $('#listticker li:first') .animate({opacity: 1}, speed) .fadeIn('slow') } interval = setInterval(removeFirst, pause); }); Еще раз объясните, какой этап поведения нужно изменить. Если можно, приведите код, которые используете на данный момент

Попробуйте так: Измените в функции removeFirst(): first = $('#listticker li:first').html(); на first = $('#listticker li:last').html(); $('#listticker li:first') на $('#listticker li:last') в функции addLast(first): $('#listticker ul').append(last) на $('#listticker ul').prepend(last) $('#listticker li:last') на $('#listticker li:first')

Если отвечать конкретно на вопрос "нужно к родителю item добавить класс "simle_class"..." то попробуй $("#" + id ).parent().addClass("simle_class");

Блин, а у меня что-то на сером фоне один белый квадрат с какой-то мутной фотографией и черным текстом. Css-ки не все прокачались?

1. В Adobe Fireworks то же самое можешь. 2,3. Открываешь картинку в программе, выбираешь вкладку "Оптимизировать и выровнять". Там все свойства описаны. Ты можешь выбрать какой тебе нужно формат, изменить свойства (напр. качество, прозрачность и т.п.). Если хочешь посмотреть, что получиться, там есть кнопка просмотра. Можешь сравнить с начальным вариантом. 4. Области, у которых прозрачность меньше 100% (можешь проверить, если что, в панели информации). Вообще, там обычно на глаз видно, прозрачно или нет. Плюс, если смотришь в двух вариантах (оригинал и gif), как уже сказал, в варианте c gif эти области светлее, чем обычные.

1. Я режу в Adobe ImageReady (идет вместе с фотошопом). У меня, я думаю, уже старая версия (7.7.), иногда макеты кривовато отображаются, но для франко-русского переводчика (т.е. меня) пойдёт, поскольку занимаюсь этим не часто. Вот, кстати, как этот макет нормально выглядит, я увидел на сайте и у тебя. Советовать этот инструмент не буду, может, есть что и получше, но сам привык к интерфейсу и опциям. Меня устраивает. Для png-8 - Adobe Fireworks. 2. Для варианта "gif-ie6, PNG - остальные". В принципе, сделать работу, которую делает png-8. Если есть Adobe Fireworks – даже не парься. Смысл прост, я его уже описал. Как уже сказал, работаю с ImageReady, поэтому расскажу, как это у меня происходит. Я беру psd или png картинку. Выбираю оптимизацию gif + прозрачность. В ImageRady есть возможность просмотреть до сохранения, как будет выглядеть оптимизированное изображение, при этом полупрозрачные области в psd или png обычно светлее основного цвета или вообще белые в gif-е. Их я вырезаю и сохраняю изображение в gif-е. Возможно, это можно сделать как-то автоматизировано, но у меня это много времени не занимает. Затем в css прописываю для ie6 (у меня через !important или в отдельном css файле) gif-картинку. Всё. Для некоторых случаев (мне) подходит. 3. Одни мелочи. Причём во многом связанные с работой дизайнера. Мог бы и немного поудобнее для вёрстки сделать макет. а) Светло-зелёные области вокруг веера и ламинатора. Видно, как ты их, сволочей, вручную стирал. Но, правда, не до конца стёр. Здесь больше вина дизайнера. Из имеющегося psd нельзя получить картинку для вёрстки, схожую с макетом, как бы там не пробовали играться со слоями. Я на фиг убрал зелёный блик на ламинаторе. И без него нормально. Или пусть дизайнер даёт мне нормальную картинку с бликом и тенью. б) Градиент в зелёном блоке. Не очень важно, если объём содержания изменяться не будет. Если будет изменяться: - В случае, если уменьшается: появляется тёмно-зеленая полоска внизу. Предложение: прописать для div.box.green div.mdl минимальную высоту - В случае, если увеличивается: в середине градиент идёт волнами. Здесь уже просто по-другому вырезать фон для блока и разобраться с нижней частью. Поскольку тоже делал, могу подсказать, что однотонная область градиента идёт примерно на высоте 110px снизу блока. в) В верхнем голубом блоке тоже есть градиент, хоть и слабый. Не очень важно, потому что визуально малозаметно. г) Решётка в голубом нижнем блоке не достаёт до низу. Не очень важно, потому что тоже визуально малозаметно. д) У меня криво отображается в ie6 с отключенным js. Вообще не важно, не фига на кривом браузере js отключать.

Решил попробовать разобраться с макетом и посмотреть, что можно сделать для уменьшения веса. В итоге получилось 350-370 кб (здесь я чего-то не понимаю, дома показывает 370, на работе - 350): http://study-languages-online.com/izo-optimized/izo.html Psywalker, в общем, я предлагаю следующие решения (длинно, но по теме): 1. Картинки с фоном дизайна у тебя не оптимизированы. Я сжал jpg на 80%, в качестве, вроде, особо не потеряли, в количестве - получили 190 кб вместо 500. (уже минус 310 кб) 2. Картинка png с травой снизу. Она у тебя весит 150 кб. Я думаю, слишком много для элемента, которого изначально при загрузке страницы не видно. При этом прозрачность элемента (если это вообще нужно макете, который, как говорят, фиксированный) важна только перед оранжевым блоком. Поэтому, предлагаю траву показывать в jpg картинке, которая используется для нижнего фона дизайна, и png вставить только перед оранжевым блоком. В итоге: вместо картинки png с шириной 1000 px (150 кб), пользовать картинку с шириной 240 - 260 px (40 кб). (еще минус 100-110 кб). 3. Ламинатор и веер. Здесь ситуация такая. Начну с веера: Тень у картинки не плавная, а поэтому нормально можно использовать png-8, который и жмёт отлично, и с ie 6 проблем нет – просто тень убирается. В итоге: вместо 60 – 70 кб получаем около 15. (еще минус 45 -50 кб) Ламинатор: Если использовать картинку как в psd макете, с плавной тенью, делать нечего - нужно использовать png – 24. Ты тень убрал, а значит, можно было бы использовать png-8 и уменьшить вес еще на 50 кб. У меня для всех браузеров, кроме ie, тень отображается. Поэтому ламинатор – png-24, веер – png-8. Для ie6 оба в png-8 для единообразия, чтобы тени не было. В итоге, ты можешь уменьшить вес как минимум на 450 кб, а возможно - и на все 700 (мне кажется, это много). Плюс, для оптимизации необходимо сократить количество запросов к серверу. А в этом макете сам бог велел использовать спрайты для уголков в png. Идеальный здесь (для меня, по крайней мере) вариант - png-8: уголки без границ и теней. В ie6 отображается сносно. Если не png-8, то для всех кроме ie – png 24, для ie6 – gif, но в gif-e вырезать области, которые полупрозрачны в png. Я думаю, что это вырезание не займёт много времени. Уголки всех блоков и меню можно объединить в 1-3 файла, и вместо 20 запросов к серверу получить 1-3 запроса. Я, правда, сам поленился, у меня по спрайту на каждый блок, но, если захочешь, потом объединю. При совместной работе с дизайнером возможна дополнительная оптимизация, если разобраться с веером, ламинатором (особенно с тенью) и оранжевым блоком. Я думаю, можно добиться веса в 250 кб. Вот, вроде, всё. Всё, что выше – ИМХО. PS I. Пока верстал, встретил у тебя пару недочётов. Не очень важных, но если хочешь, напишу. PS II. Меня каждый раз, как читаю, прёт от твоей истории про Вилларибо и Виллабаджо. LOL!!!

Если еще интересно насчет ие6, вот скриншот: http://study-languages-online.com/images/psi-ie6.jpg т.е. у меня там из информация из футера вверх вылезает, и с оранжевым блоком что-то не то, если сравнить с FF: http://study-languages-online.com/images/psi-ff.jpg При обновлении странички в FF (Firefox/2.0.0.20) футер смещается вниз: http://study-languages-online.com/images/psi-ff-2.jpg хотя, может быть, это только у меня такой баг Может быть, это не очень важно, но мне в глаза бросилось, что верхние уголки в оранжевом блоки светлее чем верхний блок между ними. Ну, и размер странички - 1000 Кб. На работе у меня интернет быстрый, а вот дома я бы ждать не стал. Но здесь это скорее вопрос к дизайнеру.

Dimitry Wolotko: Эх, если бы только ради него. У меня основной css файл - общий для полторы сотни страниц. На каждой из них - несколько изменений, которые встречаются только в них. Не знаю, насколько увеличится основной css файл, если все такие изменения буду в него вставлять. Буду думать, спасибо за совет. Как-то уж совсем скучно смотрелась главная, решил разнообразить. А как Вы думаете, не раздвигать их, или убрать вообще? Ценное замечание, мерси Vlad: Этот сайт - хобби , на работе такие изменения сделать не могу себе позволить. А вот вечерком займусь оптимизацией Хороший совет. Хорошо, но вот только в подпунктах меню далеко не все ссылки разделов, только самые нужные (на мой взгляд, опять же). Да и с отключенным JS, может получиться, что не ссылки нет, не меню работающего. На Ваш взгляд, в какую сторону мне лучше двигаться? Мне тоже. Но пока не придумал как организовать упражнения. Буду думать над структурой урока. Спасибо!