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

Mila · February 2, 2010

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

$(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 · February 3, 2010

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

Измените

в функции 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 · February 3, 2010

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 · February 3, 2010

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

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

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

$(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 · February 3, 2010

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 · February 4, 2010

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

Mila · February 4, 2010

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

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

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

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

Edited February 4, 2010 by Mila

amiron · February 4, 2010

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

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

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

после

$('#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 · February 4, 2010

amiron, спасибо.

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

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

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

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

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

amiron · February 4, 2010

Чтобы оформить анимацию для последнего видимого коммента, замените в функкции 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 · February 4, 2010

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 · February 5, 2010

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

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

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

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

Mila · February 5, 2010

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

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

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

Edited February 5, 2010 by Mila

amiron · February 5, 2010

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

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

$(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 · February 5, 2010

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

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

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

amiron · February 5, 2010

Не за что!

rus · February 5, 2010

Удалено...

Edited February 5, 2010 by rus

mm202011 · August 15, 2011

Лично мне некомфортно то, что они прыжками сдвигаются.
Вот код для того, чтобы первый появлялся не плавно, а сразу, после того как плавно исчезает последний
$(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 · August 15, 2011

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

mm202011 · August 15, 2011

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

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

Sign In

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

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information