Question

我需要显示从display:none到display:block的div，并给它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);

如何在原型js中将显示无动画DIV设置为阻止

3 个答案: