javascript - JS关于setInterval给opacity值,代码出了点问题
PHP中文网
PHP中文网 2017-04-10 17:02:02
[JavaScript讨论组]




    




111111111
1111111111111111111111111111
1111111111111111111111111111111

222222222222222222222
2222222222222222222222222
222222222222

3333333333
333333333333333333333333333

具体是这样,我想通过点击按钮来更改字段的显示。例如这样

然后想让点击时,让

字段的opacity透明度从0到1来个过渡,于是我放了一个定时器

但是报错了,并无法出现想要的透明过渡效果。

错误:Uncaught TypeError: Cannot read property 'style' of undefined

但是如果不调用定时器的函数,直接给值却是可以显示的。

    oTxt[this.index].style.display='block';
                //startMove()
                oTxt[this.index].style.opacity=100;

错在哪里了呢?

PHP中文网
PHP中文网

认证0级讲师

全部回复(1)
PHP中文网

原因就是this的指向问题,但是我这么更改后你就不会报错了,this的指向的具体情况,百度一下会有很多答案(只有4种情况),你的这个原因就是this指向了全局对象window,而不是你所点击的那个按钮。另外如果你是想要淡入淡出效果的话,你的startMove代码还是有一些问题的。对你代码做了以下的更改,但是更改后代码不兼容低版本ie的兼容。

    // 切换按钮处更改
    oBtn[i].onclick=function(){
        for(var i=0;i<oBtn.length;i++){
            oBtn[i].className='bgcolor';
            oTxt[i].style.display='none';
            oTxt[i].style.opacity = 0;
        }
        this.className='bgcolor1'; 
        oTxt[this.index].style.display='block';
        startMove(this);
    }
    //  startMove函数更改
    function startMove(_this){
        var op=document.getElementById('p1');
        var oTxt=op.getElementsByTagName('p');
        clearInterval(timer);
        timer = setInterval(function(){
            var alpha = +oTxt[_this.index].style.opacity;
            if (alpha === 1) {
                clearInterval(timer);
            }
            else{
                alpha += 0.1;
                oTxt[_this.index].style.opacity = alpha;
            }
        },30);
    }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号