如何在DIGITALITY中將DIV動畫從無顯示變為塊

Question

我需要顯示從display:none到display:block的div，以使其具有fade effect 。 我該如何在prototypejs中做到這一點？ 謝謝。

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

Answer 1

開箱即用，沒有方法可以做到這一點。

如果您正在尋找一種簡單的方法來做到這一點，則應該看看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);