纯JavaScript淡色函数
纯JavaScript淡色函数
提问于 2014-04-23 12:30:22
嗨，朋友们，当我点击另一个div时，我想在div中淡出，并为此使用以下代码。Code1工作正常，但我需要使用Code2。
我知道有jQuery，但我需要在JavaScript中这样做
你能告诉我我犯了什么错误或者我需要改变什么吗.
Code1
function starter() { fin(); }
function fin()
{
for (i = 0; i <= 1; i += 0.01)
{
i=Math.round(i*100)/100;
setTimeout("seto(" + i + ")", i * 1000);
}
}
function seto(opa)
{
var ele = document.getElementById("div1");
ele.style.opacity = opa;
}Code2 --不起作用
function starter()
{
var ele = document.getElementById("div1");
fin(ele);
}
function fin(ele)
{
for (i = 0; i <= 1; i += 0.01)
{
i=Math.round(i*100)/100;
setTimeout("seto(" + ele + "," + i + ")", i * 1000);
}
}
function seto(ele,opa)
{
ele.style.opacity = opa;
}回答 8
Stack Overflow用户
回答已采纳
发布于 2014-04-23 12:41:48
基于这站点
编辑-1
添加了功能，以便用户可以指定动画持续时间(@Marzian注释)
你可以试试这个：
function fadeIn(el, time) {
el.style.opacity = 0;
var last = +new Date();
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / time;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
var el = document.getElementById("div1");
fadeIn(el, 3000); //first argument is the element and second the animation duration in ms演示
Stack Overflow用户
发布于 2014-04-24 12:23:21
Update：人们似乎喜欢我的简约而优雅的方法，更新于2022年：
不需要复杂的机制。只要使用CSS就行了，这样就可以开箱即用，而且总体性能也更好。
基本上，您可以通过为不透明设置一个转换来实现CSS。在JavaScript中，应该是：
const div = document.querySelector('#my-div');
div.style.transition='opacity 1s';作为触发器，您只需将不透明设置为0：
div.style.opacity=0;这将产生1秒的淡出效果，您可以在任何地方使用触发器。反向也可以做，以实现褪色的效果。
下面是一个有用的例子：
const div = document.querySelector('#my-div');
div.style.transition='opacity 1s';
// set opacity to 0 -> fade out
setInterval(() => div.style.opacity=0, 1000);
// set opacity to 1 -> fade in
setInterval(() => div.style.opacity=1, 2000);#my-div { background-color:#FF0000; width:100%; height:100%; padding: 10px; color: #FFF; }<div id="my-div">Hello!</div>
Stack Overflow用户
发布于 2014-04-23 12:34:09
似乎您试图将元素转换为字符串。试一试这个
function starter()
{
var ele = document.getElementById("div1");
fin(ele);
}
function fin(ele)
{
for (i = 0; i <= 1; i += 0.01)
{
i=Math.round(i*100)/100;
setTimeout(function() { setto(ele,i); }, i * 1000);
}
}
function seto(ele,opa)
{
ele.style.opacity = opa;
}这里发生的是，当计时器命中时，我调用一个anonnymous函数，然后从这个函数中执行对setto的函数调用。
希望能帮上忙。乔纳斯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23244338
复制相关文章
相似问题
腾讯云开发者
