Question

嗨朋友，当我点击另一个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;
}

Answer 1

基于this网站

修改-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

DEMO

Answer 2

var div = document.getElementById('div');
div.style.transition="opacity 1s";
div.style.opacity="0";

Answer 3

似乎是在尝试将元素转换为字符串。试试这个

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函数，并且从该函数执行我的functioncall到setto。

希望它有所帮助。纳斯

Answer 4

这里的问题是你使用的是使用setTimeout的pass-a-string方法。这基本上只是一个隐藏的eval。

值得注意的是，这是一种不良做法，表现缓慢且存在安全风险。

（参见诸如此类的问题：setTimeout() with string or (anonymous) function reference? speedwise）

造成问题的原因是因为"seto(" + ele + "," + i + ")"将评估为"seto('[object HTMLDivElement]', 1)"。您确实希望传递对ele对象的引用 - 但是当您尝试将对象连接到字符串时，值被强制转换为字符串。您可以使用setTImeout的pass-a-function方法来解决这个问题。

setTimeout(function() { seto(ele, i); }, i * 1000);

我相信进行此更改会使您的Code2行为等同于Code1。

Answer 5

以下是我的问题的完整答案

ANS1 --- DEMO

function fin() {
    var i = 0;
    var el = document.getElementById("div1");
    fadeIn(el,i);
}

function fadeIn(el,i) {
    i = i + 0.01;
    seto(el,i);
    if (i<1){setTimeout(function(){fadeIn(el,i);}, 10);}
}

function seto(el,i) {
    el.style.opacity = i;
}

ANS2 --- DEMO

function fin(){
    var i = 0;
    var el = document.getElementById("div1");
    fadeIn(el,i);
}

function fadeIn(el,i) {
    var go = function(i) {
        setTimeout( function(){ seto(el,i); } , i * 1000);
    };
    for ( i = 0 ; i<=1 ; i = i + 0.01) go(i);
}

function seto(el,i)
{
    el.style.opacity = i;
}

Answer 6

我的版本

 function fadeIn($element){
  $element.style.display="block";
  $element.style.opacity=0;
  recurseWithDelayUp($element,0,1);
}
function fadeOut($element){
  $element.style.display="block";
  $element.style.opacity=1;
  recurseWithDelayDown($element,1,0);
}

function recurseWithDelayDown($element,startFrom,stopAt){
    window.setTimeout(function(){
      if(startFrom > stopAt ){
          startFrom=startFrom - 0.1;
            recurseWithDelayDown($element,startFrom,stopAt)
            $element.style.opacity=startFrom;
      }else{
        $element.style.display="none"
      } 
  },30);
}
function recurseWithDelayUp($element,startFrom,stopAt){
    window.setTimeout(function(){
      if(startFrom < stopAt ){
          startFrom=startFrom + 0.1;
            recurseWithDelayUp($element,startFrom,stopAt)
            $element.style.opacity=startFrom;
      }else{
        $element.style.display="block"
      } 
  },30);
}

Answer 7

我只是在laaposto的答案上做了改进，以包含回调。我还添加了一个fade_out函数。可以提高它的效率，但对我的工作很有用。

查看laaposto的答案以获取实施说明。您可以用我的小提琴代替JS，然后查看示例。

感谢laaposto！这确实为我的项目提供了零依赖。

var el = document.getElementById( "div1" );

function fade_in( element, duration, callback = '' ) {
    element.style.opacity = 0;
    var last = +new Date();
    var tick = function() {
        element.style.opacity = +element.style.opacity + ( new Date() - last ) / duration;
        last = +new Date();
        if ( +element.style.opacity < 1 ) {
            ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 );
        }
        else {
            if( is_function( callback ) ) {
                callback();
            }
        }
    };
    tick();
}

function fade_out( element, duration, callback = '' ) {
    element.style.opacity = 1;
    var last = +new Date();
    var tick = function() {
        element.style.opacity = +element.style.opacity - ( new Date() - last ) / duration;
        last = +new Date();
        if ( +element.style.opacity > 0 ) {
            ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 );
        }
        else {
            if( is_function( callback ) ) {
                callback();
            }
        }
    };
    tick();
}

function is_function( object_to_check ) {
    return object_to_check && {}.toString.call( object_to_check ) === '[object Function]';
}

fade_out( el, 3000, function(){ fade_in( el, 3000 ) } );

干杯！

Answer 8

function hide(fn){
        var hideEle = document.getElementById('myElement');
        hideEle.style.opacity = 1;
        var fadeEffect = setInterval(function() {
        if (hideEle.style.opacity < 0.1)
        {
        hideEle.style.display='none';
        fn();
        clearInterval(fadeEffect);
        }
        else
        {
        hideEle.style.opacity -= 0.1;
        }
        }, 20);
}
function show(){
        var showEle = document.getElementById('myElement');
        showEle.style.opacity = 0;
        showEle.style.display='block';
            var i = 0;
            fadeIn(showEle,i);
            function fadeIn(showEle,i) {
                i = i + 0.05;
                seto(showEle,i);
                if (i<1){setTimeout(function(){fadeIn(showEle,i);}, 25);}
            }
            function seto(el,i)
            {
                el.style.opacity = i;
            }
}

hide(show);

纯JavaScript淡入功能

8 个答案: