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

1. YouMobe (19.12.2013 / 10:45)
Этот код осуществляет выход текста вверх, до указанной высоты и ширины, выход текста резкий, хочу придать плавность при появлении текста, как сделать это?

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

	});
});

2. Снежана Ночева (19.12.2013 / 18:25)
Перед текстом вставляешь

<marquee direction="up" scrollamount="1" scrolldelay="20" onmouseover="this.stop()" onmouseout="this.start()" height="220"><br>

а после теста, в последней строке, закрываем

</marquee>

С цифрой 220 можешь поэспериментировать

3. Александр (19.12.2013 / 20:18)
Для выхода блока есть же slide вроде api

4. YouMobe (19.12.2013 / 22:55)
вот пример, http://boltun.mobi/, заметили как текст резко появляется, как придать плавность?

5. YouMobe (19.12.2013 / 23:57)
по ходу не получиться((

6. Александр (20.12.2013 / 02:40)
Нет ничего не возможного) С тебя печенька

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

		});
	  });

7. YouMobe (20.12.2013 / 08:12)
круто, исчезновение тоже плавное сделаешь?))

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

8. Александр (20.12.2013 / 14:02)
Я спать лег потом) Есть недочеты там. Первый блок также пропадае при анимациит. Надо тоже пофиксить)

9. Александр (20.12.2013 / 14:19)

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

		});
	  });

вот поправил

10. YouMobe (20.12.2013 / 15:21)
хм.. дёргается всё равно, вот смотри lifecms.ru на главную зайди

11. Александр (20.12.2013 / 15:39)
Конечно, где мой профит?

12. YouMobe (25.12.2013 / 09:06)
Всё равно какие то глюки присутствуют...

Добавлено через 05:46 сек.
это наверно из за торможения stop текста

URL: https://visavi.net/topics/39732