javascript - 如何在prototypejs中将DIV从Display None设置为Block

Question

我需要显示一个 div 从display:none给display:block它一个fade effect. 我怎样才能在prototypejs中做到这一点？谢谢。

<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);