Помогите переписать скрипт

[Mila]

У меня на сайте работает скрипт, перемещающий комментарии.

$(document).ready(function(){
	var first = 0;
	var speed = 700;
	var pause = 3500;
		function removeFirst(){
			first = $('#listticker li:first').html();

			$('#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}
		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$('#listticker ul').append(last)
			$('#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}
	interval = setInterval(removeFirst, pause);
});

HTML:

<div id="listticker">
		<h2 class="tic">Последние комментарии</h2>
<ul>

Здесь php-функция получения комментариев из базы данных.

<li class="ticker">   
   Аватар
  <span class="autor_ticker">Автор комментария </span><br />
  <span class="text_ticker">Текст комментария</span>
</li>

</ul> 
</div>

Скрипт двигает комментарии снизу - вверх.

Хотелось бы изменить направление движения - чтобы комментарии двигались сверху вниз.

Подскажите, пожалуйста, что в этом скрипте нужно изменить, чтобы он работал так, как мне нужно.

Edited February 2, 2010 by Mila

[amiron]

Попробуйте так:

Измените

в функции 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')

[Mila]

amiron, спасибо. Получилось.

Но возникла еще одна проблема, о которой я не подумала сначала.

В первоначальной версии скрипта верхний комментарий "растворялся" и исчезал - т.е. его прозрачность менялась от 1 до 0, а его место занимал новый комментарий.

Теперь, когда комменты двигаются в другую сторону, нужно, чтобы "растворялся" нижний комментарий.

Я пыталась поменять местами блоки

.animate({opacity: 0}, speed)

.fadeOut('slow', function() {$(this).remove();});

и

.animate({opacity: 1}, speed)

.fadeIn('slow')

Не сработало.

Подскажите, пожалуйста, как решить эту проблему.

Edited February 3, 2010 by Mila

[amiron]

Честно говоря, не понял, что требуется

Раньше было поведение: верхний растворяется, перемещается вниз, плавно появляется (внизу) (код, который вы приводили в первом посте)

После описанных (мной) изменений: нижний растворяется, перемещается вверх, плавно появляется (вверху) (код ниже)

$(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);

});

Еще раз объясните, какой этап поведения нужно изменить. Если можно, приведите код, которые используете на данный момент

[Mila]

amiron, вот код:

$(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);
});

Движение теперь сверху - вниз (то что нужно).

Растворяется, по-прежнему, верхний комментарий - а нужно, чтобы растворялся нижний.

Edited February 3, 2010 by Mila

[amiron]

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

[Mila]

amiron, посмотрите, пожалуйста, http://prodengiblog.ru/ - в сайдбаре блок "Последние комментарии".

Там видно, в чем проблема - нижний просто исчезает, а верхний проявляется от 0й прозрачности до 1.

Но выглядит это как то странно.

Нужно, чтобы верхний просто исчезал, а нижний растворялся, т.е его прозрачность менялась от 1 до 0.

Edited February 4, 2010 by Mila

[amiron]

А, ну это ж совсем жеж другое дело. Хорошо что ссылку выложили.

Здесь, как вы говорите, последний пункт, последний только визуально. У основного контейнера просто область видимости скрыта, так что настоящий последний находится за пределами видимости. С видимым "последним" мы ничего не сделаем. Здесь другой вариант можно сделать: появление первого пункта дооформить. Я бы сделал так: сдвинул бы плавно видимые пункты вниз и вставил, тоже плавно, первый на место.

Можно реализовать так:

после

$('#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);
});

Можно, конечно, и с анимацию для видимого последнего сделать (именно для конкретного дизайна), но это чуть больше возни

[Mila]

amiron, спасибо.

Хотя это не совсем то, что я хотела, но в таком виде этот скрипт уже можно ставить на сайт - комментарии двигаются очень естественно.

Скажите, еще пожалуйста, что нужно изменить, чтобы сделать плавное исчезновение видимого последнего комментария именно в этом дизайне?

Если, я правильно понимаю, нужно как то связать это исчезновение со стилями, т.е. исчезает комментарий, который находится, например, в position:absolute; top:160px.

Если я права, то как это сделать?

И последнее: я делаю сайты и время от времени на них нужны какие то скрипты. Вы заказы принимаете?

[amiron]

Чтобы оформить анимацию для последнего видимого коммента, замените в функкции addLast() следующее:

$('#listticker ul').prepend(last)

на

$('#listticker ul').find("li:eq(4)").animate({opacity: "0"}, "slow").end().prepend(last);

т.е. находим последний видимый элемент по порядковому номеру (считать начинаем с 0, у нас получается пять постов видно, значит номер последнего - 4) и задаём ему анимацию. Продолжительность анимации, опять же, можете настроить сами - замените "slow" на миллисекунды (напр. 500, 800 и т.п)

Если хотите убрать плавность движения вниз, соответственно уберите то, о чём я писал в прошлом посте

Заказы, к сожалению, не принимаю. С jquery можно и из интереса повозиться, если время позволяет. А если возникают трудности - пишите на форум, люди вам помогут, или в личку.

[Mila]

amiron, спасибо - это то, что нужно.

Теперь бы только убрать прозрачность в 1м комментарии.

Извините за бестолковость, но я с jscript-ми не дружу, только с php (немного)

Вот код:

$(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>';

			// Задаём анимацию последнему видимому комменту - 4му.
			$('#listticker ul').find("li:eq(4)").animate({opacity: "0"}, "800").end().prepend(last);
			$('#listticker li:first')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}
	interval = setInterval(removeFirst, pause);
});

По идее, чтобы убрать прозрачность в 1м комментарии, нужно поставить opacity: 1 - но почему то не помогает.

[amiron]

А что значит "убрать прозрачность"? Что должно происходить?

Значит, сейчас имеем:

Последний видимый плавно исчезает, список сдвигается вниз, плавно появляется первый.

Что должно измениться?

[Mila]

Должно исчезнуть плавное появление первого.

Первый должен просто выдвигаться, т.е. должен просто двигаться также, как и все другие.

Если "Последний видимый плавно исчезает, список сдвигается вниз, плавно появляется первый." - то, слишком много мелькания - читать комментарии становится некомфортно.

Edited February 5, 2010 by Mila

[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)

[Mila]

amiron, мне тоже больше нравится последний вариант.

Спасибо вам большое за помощь, без вас я бы не справилась.

Что я могу для вас делать? (ну там по баннерам покликать на сайте или помочь в чем то другом)

[amiron]

Не за что!

[rus]

Удалено...

Edited February 5, 2010 by rus

[mm202011]

Лично мне некомфортно то, что они прыжками сдвигаются.

Вот код для того, чтобы первый появлялся не плавно, а сразу, после того как плавно исчезает последний

$(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)

amiron можно ли прописать каманду данному скрипту, чтобы при наведении мыши на ссылку или картинку прокрутка останавливалась. Если да то напишите как это сделать.

[Int]

Ну может clearInterval(interval)?

[mm202011]

Ну может clearInterval(interval)?

Int спасибо за помощь. Но что то он меня не слушается. Дело в том, что я очень и очень на вы с скриптами. Для знающего человека это пара минут, а я уже несколько дней долбаюсь. И самое интресное без результно.