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

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

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

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

Можно, как пример на 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>

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

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

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

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

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

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

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

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";
}
}

или вместо пикселов в % задавайсразу бы написал что нужно изменение размеров а не изменение видимости. да и сразу ты задал тон на видимость

parObjp.style.position="absolute"; - срабатывает, а parObjp.style.height=y+"px"; - нет.

И потом как узнать начальное значение parObjp.style.height ?

И как сделать, чтобы не мгновенно исчезало, а с задержкой?

толи лыжи толи я.......а размеры контейнера изначально не заданны?узнать по тому же принципу var y=parObjp.style.height;
мож стоит хоть чуть основы языка подучить? а не копирывать чьито примеры и чуть изменять? ну а код рабочий-им я у себя на сайте изменяю размеры контейнера.задержка-ну сделай через таймер ,ну введи пустые циклы,ну измени приращивание в цикле

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";
}
}

Изменения наступят сразу. Кроме того, значение height будет скакать от ста до нуля 100 раз подряд. В-общем, бред какой-то.

положил варианты изменения по х и y.если человек не понимает как вложенные циклы работают-то может человеку стоит начать с основ програмирования. замедлить ну дак 3 варианта класики-вложенный пустой цикл. приращивание не 1 а доли 1(будет зависить от мощьности компа слиента скорость) или через таймер это организовать( ни от чего не зависит) код рабочий в смысле что модель parObjp.style.height=y+"px"; parObjp.style.width=x+"px"; рабочая . а код за него писать я не и не собирался.или мне за него ещё и думать?

Ну написал бред — ничего страшного, зачем так расстраиваться.

подколол)))чего эт бред написал? ну вложил циклы друг в друга а не разнёс-сам будтобы иногда не тупиш. а в чём остальном бред ?))) сам то с какого раза просёк что я циклы вложил друг в друга?))

Как пример на скорую руку:

<script type="text/javascript">
window.onload = function(){
    var elem = document.getElementsByTagName('div')[0], i = 0, j = 0, s = 100;   
    document.getElementsByTagName('a')[0].onclick = function(){
        if(++i<=s){
            elem.style.height = i +'px';
            j = i;
            if(j>=s) {
                return false;
            }
        }
        else {
            elem.style.height = --j +'px';
            if(j<=0){
                i = 0;
                return false;
            }
        }
        window.setTimeout(arguments.callee, 10);
        return false;
    };
};
</script>

<a href="#">click<a/>
<div style="background: #0095FF; overflow: hidden; width: 200px; height: 0px; ">Text</div>

Почему 100? Как узнать настоящий размер произвольного блока?

На всякий случай )))Вариант открытия блока на величину его содержимого...

<script type="text/javascript">
window.onload = function () {
    var a = document.getElementsByTagName("div")[0],
        b = 0,
        c = ["Text1", "Text2<br />Text2", "Text3<br />Text3<br />Text3"];
    document.getElementsByTagName("a")[0].onclick = function () {
        a.style.overflow = "hidden";
        a.style.height = "";
        a.style.display = "";
        var d = a.offsetHeight;
        if (b < d) {
            a.style.height = "0px";
            window.setTimeout(function () {
                if (++b <= d) {
                    a.style.height = b + "px";
                    window.setTimeout(arguments.callee, 10)
                }
            }, 10);
        return false;
        }
      if(  b >= d ){window.setTimeout(function () {
            if (--b >= 0) {
                a.style.height = b + "px";
                window.setTimeout(arguments.callee, 10)
            } else {
                b = 0;
                a.style.display = "none";
                c.push(c.shift());
                a.innerHTML = c[0]
            }
        }, 10);return false;}

    }
};
</script>
<a href="#">click</a>
<div style="background: #0095FF; width: 200px; display: none">Text1</div>

var y=parObjp.style.height;

Это не будет работать.
А тексты ваши читать невозможно. Куча скобок посреди текста, предложения не с заглавной буквы.

конечно не будет -если будет написанна всего эта одна строка. но этой стороки более чем достаточно чтобы понять какая строка должна перед ней стоять чтобы всё работало

Это выражение не даёт высоту элемента. Так понятней?

http://javascript.ru/blog/Andrej-Par...tcomputedstyle

+offsetWidth/offsetHeight

Как вариант...

<DIV ID=oDiv STYLE="overflow:scroll; width:200; height:100"> . . . </DIV>
<BUTTON onclick="alert(oDiv.clientWidth)">client width</BUTTON>
<BUTTON onclick="alert(oDiv.offsetWidth)">offset widthY</BUTTON>

P.S.
Пример из MSDN... :)

Про fade и самопис известно и возможно, и вот даже пример
http://neoprizma.net/demo/jquery/fading/jquery.html. Копался и на Jquery.com и тут, но не нашел исчезновение с пролетом вверх. Буду признателен.

Это работает только в том случае, если в Style заранее прописано значение height. Если же его нет, то возвращает вместо цифры "undefined".

Я так и не нашёл тогда ответ на вопрос как узнать высоту произвольного блока. Удалось ли кому-нибудь найти ответ на этот страшно сложный вопрос?

На этом форуме валом таких примеров... :)
http://javascript.ru/forum/css-html-...sota-diva.html

Значение в offsetHeight равно "undefinded".

Не надо нам вала неработающих примеров, дайте всего ОДИН, но РАБОТАЮЩИЙ.