javascript - 如何使<div>慢动作显示

我希望JavaScript代码以慢动作显示div。

function showDiv(divID)
{
       if(document.getElementById(divID).style.display=='none')
       {
           document.getElementById(divID).style.display='block';
       }
}

此处显示div，但不是慢动作。谁能帮忙??
提前致谢

开发人员

最佳答案

完全不需要jQuery，这只是一个基本概念，我正在使用您的函数来说明那是怎么做的。

   function showDiv(divID)
   {
       if(document.getElementById(divID).style.display=='none')
       {
           document.getElementById(divID).style.display='block';
       }
}

您的功能所做的基本上是从BOX模型中删除整个元素（块的切换并没有从BOX模型中完全删除元素，因此它不占用任何空间或任何空间，但这可能/可能不会引起一些布局问题）；

现在要以慢动作对其进行动画处理，您需要一个计时功能。

计时函数是一个简单的数学函数，它在给定的时间内或根据其他参数给出属性的值（在您的情况下为不透明度）。

除此之外，您还需要使用诸如不透明度之类的属性来使其褪色（不透明度是一个CSS属性，用于定义元素及其子元素的透明度）

因此，让我们从使用JS中的setTimeout函数开始非常基本的显示/隐藏开始。

function getValue(t,dir){

  if( dir > 0){
   return 0.5*t; /* Y = mx + c  */
  }else{
   return 1-(0.5*t);
  }
  /*
    Here the slope of line m = 0.5.
    t is the time interval.
  */
}


function animator(divID){
      if(!(this instanceof animator)) return new animator(divID); /* Ignore this */
  var Node = document.getElementById(divID),
      start = new Date.getTime(), // The initiation.
      now = 0,
      dir = 1,
      visible = true;
  function step( ){
    now = new Date.getTime();
    var val = getValue( now - start,dir)
    Node.style.opacity = val;
    if( dir > 0 && val > 1 || dir < 0 && val < 0 ){
      visible = !(visible*1);
      // Optionally here u can call the block & none
      if( dir < 0 ) { /* Hiding  and hidden*/
        Node.style.display = 'none'; // So if were repositioning using position:relative; it will         support after hide
      }
      /* Our animation is finished lets end the continous calls */
      return;
    }
    setTimeout(step,100); // Each step is executated in 100seconds
  }
  this.animate = function(){
    Node.style.display = 'block';
    dir *= -1;
    start = new Date.getTime();
    setTimeout(step,100);
  }
}

现在您可以简单地调用该函数

  var magician = new animator('divName');

然后通过以下方式切换其动画

  magician.animate();

现在使用计时功能，您可以创建所需的任何可能性

  return t^2 / ( 2 *3.23423 );

甚至更高的多项式方程式

  return t^3+6t^2-38t+12;

如您所见，我们的功能非常基础，但是它解释了如何使用纯js制作动画的要点。您以后可以使用CSS3模块制作动画，并使用javascript触发这些类：-)

或者，也许使用CSS3（更快）和JS（如果没有的话，写CSS）来编写跨浏览器的polyfill :-)希望对您有所帮助

关于javascript - 如何使<div>慢动作显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10266432/