Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Плавно выпадающий Div (https://javascript.ru/forum/misc/24139-plavno-vypadayushhijj-div.html)

Рустиш 19.12.2011 00:44

Плавно выпадающий Div
 
если так, то выпадает 1 пиксель блока при нажатии клавиши:
function changeHeight(){
i=0;
document.getElementById('Keys1').style.display='bl ock';
ddd=setInterval(stopChange(), 100);
}

function stopChange(){
i=i+1;
document.getElementById('Keys1').style.height=i;
if (i == 155) {clearInterval(ddd);}
}
подскажите, пожалуйста, где ошибка?

ksa 19.12.2011 08:41

Рустиш, для начала сделай полный пример, а не огрызки...

Возможно из-за этого
document.getElementById('Keys1').style.height=i*!*+'px'*/!*;

Рустиш 19.12.2011 11:54

щас) дело там не в пикселах. если в первой функции ставлю начальное i=5, то и выпадает на 5 пикселов. вот код более подробный:

<a href="javascript: changeHeight()">Составить заказ</a> 
<div id="keys1">...</div>
- ссылка в главном документе, которая запускает функцию первую, а так же сам раскрывающийся див.

#keys1{
width: 150px;
height: 0px;
overflow:hidden;
display: none;
background-color: rgba(255, 255, 0, 1);
}
- описание дива в цсс.

function changeHeight(){
i=0;
document.getElementById('Keys1').style.display='bl ock';
ddd=setInterval(stopChange(), 100);
}

function stopChange(){
i=i+1;
document.getElementById('Keys1').style.height=i;
if (i == 155) {clearInterval(ddd);}
- ну и вот, собственно ЯС, сохраненный в отдельном, подключенном к проекту, файле.

не наращивается значение i в функции stopChange() при повторном ее вызове через интервал времени 100.

Рустиш 19.12.2011 12:06

все, заработало. засунул вторую функцию полностью в первую:

function changeHeight(){
i=0;
document.getElementById('Keys1').style.display="block";
ddd=setInterval(function (){i=i+1;document.getElementById('Keys1').style.height = i;if (i >= 155) {clearInterval(ddd);};}, 400);
}


и апгрейд:

<a href="javascript: changeHeight('Keys1',156)">Составить заказ</a>
<div id="keys1">...</div>


#keys1{
width: 150px;
height: 0px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0);
}


function changeHeight(divID, normalHeight){
alert(normalHeight);
myDiv = document.getElementById(divID);
size=normalHeight+'px';
if(myDiv.style.height==''){myDiv.style.height = '0px';};
if(myDiv.style.height=='0px'){i=0; ddd = setInterval(function (){myDiv.style.height = ++i; if (i >= normalHeight) {clearInterval(ddd);};}, 0);}
else if(myDiv.style.height==size){{i=normalHeight; ddd = setInterval(function (){myDiv.style.height = --i; if (i <= 0) {clearInterval(ddd);};}, 0);};};
}

Рустиш 19.12.2011 23:47

ребят, это опять я... в мазиле список всего один раз открывается и закрывается, во всех остальных браузерах нормально хоть триста раз тыкай, будет работать корректно. что делать? :)

ksa 20.12.2011 09:14

Цитата:

Сообщение от Рустиш
что делать?

Начни с тестового примера...

melky 20.12.2011 10:25

Цитата:

Сообщение от Рустиш (Сообщение 144406)
function changeHeight(){
i=0;
document.getElementById('Keys1').style.display='bl ock';
ddd=setInterval(*!*stopChange()*/!*, 100);
}

function stopChange(){
i=i+1;
document.getElementById('Keys1').style.height=i;
if (i == 155) {clearInterval(ddd);}
.

вечная ошибка. скобки не надо писать. скобками вы вызываете функцию, а setTimeout требует функцию как первый аргумент

Цитата:

Сообщение от Рустиш (Сообщение 144582)
ребят, это опять я... в мазиле список всего один раз открывается и закрывается, во всех остальных браузерах нормально хоть триста раз тыкай, будет работать корректно. что делать? :)

changeHeight('Keys1',156);

function changeHeight(divID, normalHeight) {
    myDiv = document.getElementById(divID);
    size = normalHeight + 'px';
    if (myDiv.style.height == '') {
        myDiv.style.height = '0px';
    };
    if (myDiv.style.height == '0px') {
        i = 0;
        ddd = setInterval(function () {
            *!*myDiv.style.height = ++i;*/!*
            if (i >= normalHeight) {
                clearInterval(ddd);
            };
        }, 0);
    } else if (myDiv.style.height == size) {
        {
            i = normalHeight;
            ddd = setInterval(function () {
                *!*myDiv.style.height = --i;*/!*
                if (i <= 0) {
                    clearInterval(ddd);
                };
            }, 0);
        };
    };
}

фф не переваривает длины и т.д в css без указания измерения. пиксели надо дописать, как сказал ksa.

Рустиш 21.12.2011 17:46

melky, спасибо!


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