javascript 如何使 <div> 出现在慢动作中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10266432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to make a <div> appear in slow motion
提问by Dev
I want the javascript code to show a div in slow motion.
我希望 javascript 代码以慢动作显示一个 div。
function showDiv(divID)
{
if(document.getElementById(divID).style.display=='none')
{
document.getElementById(divID).style.display='block';
}
}
Here div appears, but not in slow motion. Can anyone help ?? Thanks in advance
这里 div 出现，但不是慢动作。有人可以帮忙吗？？提前致谢
Dev..
开发..
回答by ShrekOverflow
There is no need of jQuery in this atall , its just a basic I am using your function to explain how thats done.
根本不需要jQuery，它只是一个基本的我正在使用您的函数来解释这是如何完成的。
function showDiv(divID)
{
if(document.getElementById(divID).style.display=='none')
{
document.getElementById(divID).style.display='block';
}
}
What your function is doing is basically removing the whole Element from BOX Model ( the toggle of block and none removes the element totally from the BOX Model so it doesnt occupies any space or anything , this but may / may not cause some layout issues );
您的功能所做的基本上是从 BOX 模型中删除整个 Element（块的切换和 none 将元素完全从 BOX 模型中删除，因此它不占用任何空间或任何东西，但这可能/可能不会导致一些布局问题）；
Now to animate it in slow motion you need a timing function.
现在要以慢动作制作动画，您需要一个计时功能。
a timing function is a simple mathematical function which gives the value of the property ( opacity in your case ) for a given time or depending on other parameters .
计时函数是一个简单的数学函数，它给出给定时间或取决于其他参数的属性值（在您的情况下为不透明度）。
Other then that you also need to use properties like opacity in order to fade it (Opacity is a CSS property that defines the transparency of an element and its childrens )
除此之外，您还需要使用像 opacity 这样的属性来淡化它（Opacity 是一个 CSS 属性，它定义了元素及其子元素的透明度）
So let us begin with a very basic show / hide using setTimeout Function in JS.
因此，让我们从使用 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);
}
}
now you can simply call the function
现在您可以简单地调用该函数
var magician = new animator('divName');
then toggle its animation by
然后通过切换它的动画
magician.animate();
Now playing with the timing function you can create whatever possibilities you want as in
现在使用计时功能，您可以创建任何您想要的可能性，如
return t^2 / ( 2 *3.23423 );
or even higher polynomial equations like
甚至更高的多项式方程，如
return t^3+6t^2-38t+12;
As you can see our function is very very basic but it explains the point of how to make animations using pure js . you can later on use CSS3 module for animation and trigger those classes with javascript :-)
如您所见，我们的函数非常基础，但它解释了如何使用纯 js 制作动画的要点。你可以稍后使用 CSS3 模块制作动画并使用 javascript 触发这些类:-)
Or perhaps write a cross browser polyfill using CSS3 where available ( it is faster ) , and JS if not :-) hope that helps
或者在可用的情况下使用 CSS3 编写跨浏览器 polyfill（它更快），如果没有，则使用 JS :-) 希望有所帮助
回答by user1342369
Crossbrowser solution(without jQuery) :
跨浏览器解决方案（无 jQuery）：
HTML :
HTML :
<div id="toChange" ></div>
CSS :
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 :
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);
Fiddle demonstration : http://jsfiddle.net/JgxW6/1/
小提琴演示：http: //jsfiddle.net/JgxW6/1/
回答by sg3s
So you have a few jQuery answers but I wouldn't recommend jQuery if fading the div is all you want.
所以你有一些 jQuery 答案，但如果你只想要淡入淡出 div，我不会推荐 jQuery。
Certainly jQuery makes things easier but it is a lot of overhead for a single simple functionality.
当然，jQuery 使事情变得更容易，但对于单个简单的功能来说，它的开销很大。
Here is someone that did it with pure JS:
这是一个用纯 JS 完成的人：
Fade in and fade out in pure javascript
And a CSS3 example:
和一个 CSS3 示例：
回答by Akash Yadav
You can use jquery $.show('slow') for the same, if you want to do the same without using jquery then you might be required to code something to show the effect yourself, you may have a look at source of jquery's show function http://james.padolsey.com/jquery/#v=1.6.2&fn=show. alternatively , you can also use fadein() for fade in effect in jquery
您可以使用 jquery $.show('slow') 同样，如果您想在不使用 jquery 的情况下执行相同操作，那么您可能需要编写一些代码来自己显示效果，您可以查看 jquery 的显示源功能http://james.padolsey.com/jquery/#v=1.6.2&fn=show。或者，您也可以使用fadein() 在jquery 中实现淡入效果
