Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как сделать, чтобы span или div исчезали и появлялись плавно? (https://javascript.ru/forum/misc/13330-kak-sdelat-chtoby-span-ili-div-ischezali-i-poyavlyalis-plavno.html)

Бобр 26.11.2010 12:54

Как сделать, чтобы span или div исчезали и появлялись плавно?
 
Как сделать, чтобы span или div исчезали и появлялись плавно?

Обычно делается так:
style.display = 'none';

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

monolithed 26.11.2010 13:05

Можно, как пример на jQuery

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<a href="#">click</a>
<div style="background: blue; width: 200px; height: 50px;"></div>

<script>
$('a').click(function() {
  $('div').fadeToggle('slow', 'linear');
});
</script>

Бобр 26.11.2010 13:16

А можно без джиКвэри?

monolithed 26.11.2010 13:25

Цитата:

Сообщение от Бобр
А можно без джиКвэри?

Лично у меня нет лишних полчаса

exec 26.11.2010 14:24

http://studioad.ru/blog/2009-04-16-66

dmitriymar 26.11.2010 17:27

а можно и по другому. накрыть сверху див другим дивом. и плавно менять его его свойсво css от прозрачного до основного цвета сайта)

ksa 26.11.2010 20:54

Цитата:

Сообщение от dmitriymar
накрыть сверху див другим дивом. и плавно менять его его свойсво css

Что мешает менять эти свойства у самого элемента без всяких "накрытий"?

dmitriymar 26.11.2010 21:02

ну мона и так. только смотря ведь какой элемент плавно скрывать и открывать.хотя ты прав и я прав))

Бобр 26.11.2010 22:22

Я имел в виду не уменьшение прозрачности, а уменьшение размеров блока. Можно каким-то параметром плавно уменьшать его размеры, там ставить 90% от оригинальной высоты, потом 80% и так далее?

dmitriymar 26.11.2010 22:37

ну и что сложного?)))

parObjp=document.getElementById(id diva);
parObjp.style.position="absolute";
for (x=100;x>0;x--){
for (y=100;y>0;y--){

parObjp.style.height=y+"px";
parObjp.style.width=x+"px";
}
}


Часовой пояс GMT +3, время: 05:08.