Плавный выход текста

Печать RSS
524

Y
Автор
Землянин
0
Этот код осуществляет выход текста вверх, до указанной высоты и ширины, выход текста резкий, хочу придать плавность при появлении текста, как сделать это?
$(function() {
    //cache the ticker
	var ticker = $("#ticker");
	//wrap dt:dd pairs in divs
	ticker.children().filter("dt").each(function() {
		var dt = $(this),
		container = $("<div>");
			dt.next().appendTo(container);
			dt.prependTo(container);
			container.appendTo(ticker);
	});

	//hide the scrollbar
	ticker.css("overflow", "hidden");

	//animator function
	function animator(currentItem) {
		//work out new anim duration
		var distance = currentItem.height();
	    duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

		//animate the first child of the ticker
		currentItem.animate({ marginTop: -distance }, duration, "linear", function() {

		    //move current item to the bottom
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

			//recurse
			animator(currentItem.parent().children(":first"));
		 });
	};

	//start the ticker
	animator(ticker.children(":first"));

	//set mouseenter
	ticker.mouseenter(function() {

		//stop current animation
		ticker.children().stop();

    });

	//set mouseleave
	ticker.mouseleave(function() {

        //resume animation
		animator(ticker.children(":first"));

	});
});
Изменил: YouMobe (19.12.2013 / 10:48)

Чатланин
0
Перед текстом вставляешь
<marquee direction="up" scrollamount="1" scrolldelay="20" onmouseover="this.stop()" onmouseout="this.start()" height="220"><br>
а после теста, в последней строке, закрываем
</marquee>
С цифрой 220 можешь поэспериментировать

Пришелец
0
Для выхода блока есть же slide вроде api
Y
Автор
Землянин
0
вот пример, http://boltun.mobi/, заметили как текст резко появляется, как придать плавность?
Y
Автор
Землянин
0
по ходу не получиться((

Пришелец
0
Нет ничего не возможного) С тебя печенька
  $(function() {
        //cache the ticker
		var ticker = $("#ticker");
		//wrap dt:dd pairs in divs
		ticker.children().filter("dt").each(function() {
		var dt = $(this),
		    container = $("<div>");

		  dt.next().appendTo(container);
		  dt.prependTo(container);

		  container.appendTo(ticker);
		});

		//hide the scrollbar
		ticker.css("overflow", "hidden");

		//animator function
		function animator(currentItem) {
			// PROFIT!
			currentItem.css("opacity", 0);
			//work out new anim duration
			var distance = currentItem.height();

			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

			//animate the first child of the ticker
			currentItem.animate({ marginTop: -distance}, duration, "linear", function() {
			// PROFIT!
			currentItem.fadeTo(2000, 1);
			//move current item to the bottom
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

			//recurse
			animator(currentItem.parent().children(":first"));
		  });
		};

		//start the ticker
		animator(ticker.children(":first"));

		//set mouseenter
		ticker.mouseenter(function() {
			// PROFIT!
			ticker.children(":last").css("opacity", 1);
			//stop current animation
			ticker.children().stop();

		});

		//set mouseleave
		ticker.mouseleave(function() {

          //resume animation
		  animator(ticker.children(":first"));

		});
	  });
Изменил: Александр (20.12.2013 / 02:46)
Y
Автор
Землянин
0
круто, исчезновение тоже плавное сделаешь?))

Добавлено через 00:35 сек.
6. Пока нет балов, не забуду +)

Пришелец
0
Я спать лег потом) Есть недочеты там. Первый блок также пропадае при анимациит. Надо тоже пофиксить)

Пришелец
0
  $(function() {
        //cache the ticker
		var ticker = $("#ticker");
		//wrap dt:dd pairs in divs
		ticker.children().filter("dt").each(function() {
		var dt = $(this),
		    container = $("<div>");

		  dt.next().appendTo(container);
		  dt.prependTo(container);

		  container.appendTo(ticker);
		  
		});

		//hide the scrollbar
		ticker.css("overflow", "hidden");

		//animator function
		function animator(currentItem) {
			// PROFIT!
			$("#ticker").children(":first").fadeTo(2000, 0);
			//work out new anim duration
			var distance = currentItem.height();

			duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;

			//animate the first child of the ticker
			currentItem.animate({ marginTop: -distance}, duration, "linear", function() {
			// PROFIT!
			currentItem.fadeTo(1000, 1);
			//move current item to the bottom
			currentItem.appendTo(currentItem.parent()).css("marginTop", 0);

			//recurse
			animator(currentItem.parent().children(":first"));
		  });
		};

		//start the ticker
		animator(ticker.children(":first"));

		//set mouseenter
		ticker.mouseenter(function() {
			// PROFIT!
			ticker.children().css("opacity", 1);
			//stop current animation
			ticker.children().stop(true);

		});

		//set mouseleave
		ticker.mouseleave(function() {

          //resume animation
		  animator(ticker.children(":first"));

		});
	  });
вот поправил
Y
Автор
Землянин
0
хм.. дёргается всё равно, вот смотри lifecms.ru на главную зайди
Стикеры / Теги / Правила / Топ тем / Топ постов / Поиск