javascript - プロトタイプjsでDIVを表示なしからブロックにアニメーション化する方法

Question

から div を表示して、display:noneをdisplay:block与える必要がありfade effectます。プロトタイプjsでこれを行うにはどうすればよいですか? ありがとう。

<div id="fadeId" style="display:none">
</div>

Answer 1

すぐに使えるprototypejsでそれを行う方法はありません。

それを行うための簡単な方法を探している場合は、scriptaculousをご覧ください。これは、prototypejs 上に構築された UI フレームワークであり、私の知る限り、prototypejs のすべてのユーザーが使用するものです。

次に例を示します。

// Fade-in
Effect.Appear('fadeId', {duration: 2}); // the duration parameter is optional

// Toggle fadein/fadeout
Effect.Toggle('fadeId', 'appear');

コードが多すぎるため（そして、この質問の範囲外です）、それを行う方法については言及しません。シンプルなアニメーション ライブラリについては、 $fxをご覧になることをお勧めします。

Answer 2

ここでパーティーに遅れているようですが、カスタム関数とタイマーでそれを行うことができます。

function animate() {
  var element = $('fadeId');
  var opacity = element.getOpacity() + 0.1;
  element.setStyle({'display': 'block', 'opacity': opacity});
  if(opacity < 1) {
    setTimeout(animate, 100);
  }
}
function doshow() {
  var element = $('fadeId');
  element.setStyle({'display': 'block', 'opacity': 0.0});
  setTimeout(animate, 100);
}
$('show').on('click', doshow);

http://jsfiddle.net/ApzhJ/でフィドルを参照してください。

フェードインとフェードアウトするには、フィドルhttp://jsfiddle.net/Y5CB9/をチェックしてください

Answer 3

これにはJqueryを使用できます

$("#fadeId").fadeIn(slow);