Спорт! Варианты решения задачи

BaNru · 17.01.2012

Для расширения знаний и кругозора предлагаю заняться спортивным интересом по jQuery )))

Вот есть задача:

Создание объекта в думе документа
Его плавное появление
Его плавное исчезновение
Его удаление из дума документа

Вот мой пример реализации
http://jsfiddle.net/BaNru/mE285/

У кого будут еще какие варианты реализации данной задачи?!

PS В данной теме интересуют решения на jQ, но если будут и другие предложения, так же буду рад увидеть.

medwoodu · 18.01.2012

ну, что сказать, осталось выделить это все в класс

и сделать оформить плагином

BaNru · 18.01.2012

Ну да, примерно так и сделал, правда просто функцией.

Меня интересуют другие варианты решения. Для расширения кругозора.

Вот сама функция, исправленная и улучшенная. Может пригодиться кому.
http://jsfiddle.net/BaNru/cSNHE/

антиКИЛЛЕР · 18.01.2012

Я делаю это примерно таким же образом. Сейчас как раз делаю нечто подобное, но в чуть расширенном варианте (у меня там html элементы загружаются по аяксу и формируются php скриптом).
На самом деле, насколько я знаю, рекомендуется использовать методы специальные для создание новых элементов DOM, но я обычно так же просто пишу html код в строку. Думаю завтра-послезавтра закончу и думаю выложу тут.

Пы.Сы. Хороший кстати сервис, jsfiddle.net, надо добавить в закладки)

BaNru · 18.01.2012

антиКИЛЛЕР сказал(а):
но в чуть расширенном варианте (у меня там html элементы загружаются по аяксу и формируются php скриптом).

Так я написал функцию, которой легко можно вызывать информационное поле с необходимым текстом.
А по клику или чем другим вызываться будет - это не имеет значения. Вызывать можно по любому событию, хоть по onLoad страницы.

И к ajax.load можно так же подключить.

И повторю. Я ищу именно способы решения, для накопления багажа решений.

vla · 19.01.2012

BaNru сказал(а):
Меня интересуют другие варианты решения. Для расширения кругозора.

Предложу свой вариант:
http://nng10.ru/tras..._animation.html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JS-анимация</title>
<style type="text/css">
#d1{width:10em;height:0px;background-color:#999;text-align:center;}
#s1{cursor:pointer;}
</style>
<script>
function f_click(){
  var v_height = 0;
   function visual(){v_height++;document.getElementById("d1").style.height=v_height+'px';
	if(v_height>35){document.getElementById("d1").textContent="Опа";}
	if(v_height>50){clearInterval(timer);}
   }
  var timer=setInterval(visual,10);}
</script>
</head>
<body>
<span id="s1" onClick="f_click();">Кнопка</span>
<div id="d1"></div>
</body>
</html>

В своем я использовал только js
Сделал выпадание элемента ("скрытие" - аналогично, делать не стал)
Стилями сильно не раскрашивал, тк [member=BaNru] не удивишь скругленными углами и прозрачностью, да и раздел про JS а не про верстку!

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

PS: Это мой первый анимационный эффект, если чё )

Aristotel · 19.01.2012

vla сказал(а):
http://nng10.ru/tras..._animation.html

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

vla · 20.01.2012

[member=Aristotel], плавное исчезание делается аналогично (сразу,по_команде,через_2_минуты...)

Aristotel сказал(а):
у него не красивое появление

Там все стремное

! Я ни на что не претендую! Просто хотел показать, что на JS это можно сделать тоже.

Я сделал плавное появление(v_height++), а можно с ускорением(v_height=v_height*v_height) или волнообразно нарастающее(типа_синусоиды)

Будет время постараюсь продемонстрировать более опрятный вариант...

Спорт! Варианты решения задачи

BaNru

Пацифизжу

medwoodu

Злобный модер

BaNru

Пацифизжу

антиКИЛЛЕР

Well-Known Member

BaNru

Пацифизжу

vla

Well-Known Member

Aristotel

Well-Known Member

vla

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей