javascript - 如何让 以慢动作出现

Question

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

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

此处出现了 div，但不是慢动作。谁能帮忙？？提前致谢

开发..

Answer 1

这里根本不需要 jQuery，它只是一个基本的，我正在使用你的函数来解释它是如何完成的。

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

您的功能基本上是从 BOX 模型中删除整个元素(block 和 none 的切换将元素从 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 编写一个跨浏览器的 polyfill(它更快)，如果没有则使用 JS :-) 希望能有所帮助