Javascript "For"ループが機能していませんか？

Question

私は、ドロップダウンメニューをアニメーション化しようとしているJavascriptファイルを持っています。特定のdivをクリックすると、そのファイルに "Toggle"機能が設定されています。ここで私が使用しているスクリプトです：

var up = true; 
     function Toggle(x) 
    { 
     if (up) 
     { 
      for (var i = x.offsetTop; i <= 0; i++) 
      { 
       x.style.top = i; 
       if (i == 0) 
       { 
        up = false; 
       } 
      } 
     } 

     else if (up == false) 
     { 
      for (var i = x.offsetTop; i >= -50; i--) 
      { 
       x.style.top = i; 
       if (i == -50) 
       { 
        up = true; 
       } 
      } 
     } 
    } 

私がアニメーション化したいHTMLのdivでは、私は「onclickの」プロパティを「onclickの=トグル（本）」に設定しています。最初のforループは必要に応じて動作します（divのトップオフセットを0に設定します）。ただし、2番目のforループはoffsetTopを設定しません。私はそれをテストしたので、forループが起動していることを知っていて、0から-50までのあらゆる整数を返します。オフセット位置を設定していないのはなぜですか？

Answer 1

1）あなたは、トップすなわちに単位を指定する必要があります。あなたがたsetIntervalやsetTimeoutを

あなたが尋ねたように、例を使用するのx.style.top = i +"px"

2）あなたの関数が代わりにアニメーション化しません。私は私のプロジェクトの一つとしてこれをやっていないだろうが、私はあなたのコードをよりよく理解できるようにあなたの機能を保った。 必要のないときのsetIntervalをクリアしなければならないとのsetTimeoutは一度だけ起動されたので、私はsetTimeoutを代わりにしたsetIntervalを使用しました。

var Toggle = (function() { // use scope to define up/down 
    var up = true; 
    return function(element) { 
     var top = parseInt(element.style.top, 10); // element.offsetTop ? 
     if (!top) { 
      top = 0; 
     } 

     if (up) { 
      if (element.offsetTop < 0) { // if we are not at 0 and want to get up 
       element.style.top = (top+1) + "px"; 
       setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms 
      } else { // we change up value 
       up = !up; 
      } 
     } 
     else { 
      if (element.offsetTop > -50) { 
       element.style.top = (top-1) + "px"; 
       setTimeout(function() { Toggle(element); }, 10); // recall the function in 10 ms 
      } else { 
       up=!up; 
      } 
     } 
    } 
})(); 

Answer 2

をあなたがトップと同様のCSSプロパティとしてx.style.top = i + 'px'を使用する必要があるだろう、px（タイプを定義する必要がありますem,%など）であり、0である場合を除き、いずれの場合も0である。

しかし、あなたのスクリプトは実際には divを直接-50pxにスナップするでしょう。これらの繰り返しステップの間に待たないでください。

animate()メソッドを使用するには、jQueryのようなライブラリを使用することをおすすめします。

function Toggle(obj) { 
    $(obj).animate({ 
    top: parseInt($(obj).css('top')) === 0 ? '-50px' : '0px' 
    }) 
}