how to make a <div> appear in slow motion

how to make a <div> appear in slow motion

本文关键字：appear in slow motion gt div to lt how make      更新时间：2023-09-26
以慢动作出现。

我希望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 模型中删除整个元素（块的切换和 none 从 BOX 模型中完全删除元素，因此它不占用任何空间或任何东西，但这可能不会/可能不会引起一些布局问题）;

现在要以慢动作制作动画，您需要一个计时功能。

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

除此之外，您还需要使用不透明度等属性来淡化它（Opacity 是一个 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：-）希望有帮助

跨浏览器解决方案（不带jQuery）：

.HTML：

<div id="toChange" ></div>

.CSS：

#toChange
{
    background-color:red;
    width:200px;
    height:200px;
    opacity:0;//IE9, Firefox, Chrome, Opera, and Safari
    filter:alpha(opacity=0);//IE8 and earlier
}

Javascript ：

var elem=document.getElementById("toChange");
var x=0;
function moreVisible()
{
    if(x==1)clearInterval(t);
    x+=0.05;
    elem.style.opacity=x;
    elem.style.filter="alpha(opacity="+(x*100)+")";
}
var t=setInterval(moreVisible,25);

小提琴示范：http://jsfiddle.net/JgxW6/1/

所以你有一些jQuery答案，但如果你想要淡入淡出div，我不推荐jQuery。

当然，jQuery使事情变得更容易，但对于单个简单的功能来说，这是很大的开销。

这是用纯JS做过的人：

在纯JavaScript中淡入和淡出

还有一个 CSS3 示例：

如何使用Javascript触发CSS3淡入效果？

你可以使用 jquery $.show（'slow'） 来做同样的事情，如果你想在不使用 jquery

的情况下做同样的事情，那么你可能需要自己编写一些代码来显示效果，你可以看看 jquery 的 show 函数 http://james.padolsey.com/jquery/#v=1.6.2&fn=show 的源代码。 或者，你也可以在 jQuery 中使用 fadein（） 来表示淡入效果

是的，你可以使用Jquery来做到这一点。这是我的示例示例 

$('#divID').click(function() {
   $('#book').show('slow', function() {
// Animation complete.
  });

}）;

有关详细信息，请单击此处谢谢。

相关文章：