2012-02-18 3 views
0

Итак, я пытаюсь сделать анимацию в JavaScript (я хочу, чтобы панель навигации выпадала, когда я нажимаю на нее). Проблема в том, что каждый раз, когда я нажимаю эту панель навигации, она перемещается только на один пиксель. Как сделать так, чтобы функция «Переместить» повторялась снова и снова, чтобы она отображала навигационную панель ниже «0» и перемещала ее вверх? Вот код, который у меня есть atm:Как повторить функцию onclick - Javascript

var i = -43 //original position of div 

    function Move(x) 
{ 
    if (i < 0) 
    { 
     i++; 
     x.style.top = i + "px"; 
    } 

} 


function setPosition(x) 
{ 
    setInterval(Move(x), 500); 
} 

P.S. У меня есть «ДИВО OnClick» равно «setInterval (это)»

+0

Я не думаю, что вы должны иметь 'Move (х)' есть в вашем 'setInterval' функции. Вместо этого используйте функцию function() {Move (x); } ' – 0x499602D2

ответ

0

Я бы использовать setTimeout() (так что вам не придется беспокоиться об отмене setInterval()), и обратите внимание на использование анонимной функции (function(){}) для первого аргумента setTimeout() вызова:

#slider { 
    position: absolute; 
    top: -43px; 
    left: 200px; 
    width: 200px; 
    height: 50px; 
    border: 1px solid blue; 
    background: #dff; 
} 

<div id='slider'>This is a slidout</div> 
<div id="clicker">Click me!</div> 

var slider = document.getElementById('slider'), 
    clicker = document.getElementById('clicker'); 

clicker.onclick = function(){ 
    Move(slider, -43); 
}; 

function Move(x, i) 
{ 
    if (i < 0) 
    { 
     i++; 
     x.style.top = i + "px"; 

     setTimeout(function(){ 
      Move(x, i); 
     }, 50); 
    } 
} 

http://jsfiddle.net/h2C3A/

Смежные вопросы