JS实现控件渐隐渐显效果

通过div举例：鼠标在div上时使其渐显，鼠标移开使其渐隐

<div class="picture" onmouseenter="setstatus(this,1)" onmouseleave="setstatus(this,0)"></div>

（1）先给该div添加一个自定义属性

用在效果变化的过程中进行中断（比如渐隐未完成时又想让div渐显），应该也有其他方式进行中断；我这里采用0和1作为属性值；初始值为0

$(".picture").attr("isno",0);

（2）编写渐显show()，渐隐hide()的效果函数

这里渐隐渐显使用style.opacity属性，值为0~1，首先需要一个获取该属性值的函数，因为我没找到自带的，如果有自带的可以不需要这个函数，进行替换即可；

 function getStyle(obj, styleName) {
        if (obj.currentStyle) {
            return obj.currentStyle[styleName];
        } else {
            return getComputedStyle(obj, null)[styleName];
        }
    }

下面的 var du 就是style.opacity属性值。

 function show(v){
        var du = parseFloat(getStyle(v, "opacity"));
        $("#con2").text("true"+du);
        if (du < 1 && v.getAttribute("isno")==1) {
            du = du + 0.05;
            v.style.opacity = du;
            setTimeout(function () {
                show(v);
            }, 50);
        }
    }

function hide(v) {
        var du = parseFloat(getStyle(v, "opacity"));
        $("#con2").text("false"+du);
        if (du > 0 && v.getAttribute("isno")==0) {
            du = du - 0.05;
            v.style.opacity = du;
            setTimeout(function () {
                hide(v);
            }, 50);
        }
    }

（3）编写调用接口函数

将效果函数与自定义属性结合，这里无法将自定义属性直接加入效果函数，（坑）

 function setstatus(v,s) {
        v.setAttribute("isno",s);
        if(s){
            show(v);
        }else{
            hide(v);
        }
    }

（4）将接口函数写入div的触发事件里

<div class="picture" οnmοuseenter="setstatus(this,1)" οnmοuseleave="setstatus(this,0)"></div>

这里分配1为鼠标在div上，0为鼠标移开div。

（5）总js代码

<script type="text/javascript">
    $(".hover-picture").attr("isno",0);
    function setstatus(v,s) {
        v.setAttribute("isno",s);
        if(s){
            show(v);
        }else{
            hide(v);
        }
    }
    function show(v){
        var du = parseFloat(getStyle(v, "opacity"));
        $("#con2").text("true"+du);
        if (du < 1 && v.getAttribute("isno")==1) {
            du = du + 0.05;
            v.style.opacity = du;
            setTimeout(function () {
                show(v);
            }, 50);
        }
    }

    function hide(v) {
        var du = parseFloat(getStyle(v, "opacity"));
        $("#con2").text("false"+du);
        if (du > 0 && v.getAttribute("isno")==0) {
            du = du - 0.05;
            v.style.opacity = du;
            setTimeout(function () {
                hide(v);
            }, 50);
        }
    }

    function getStyle(obj, styleName) {
        if (obj.currentStyle) {
            return obj.currentStyle[styleName];
        } else {
            return getComputedStyle(obj, null)[styleName];
        }
    }
</script>

完

在自己搞之前，找到一位大佬的代码

 function alphaPlay(obj, method) { //method有两个值show或hiden
        var n = (method == "show") ? 0 : 100,
            ie = (window.ActiveXObject) ? true : false;
        var time = setInterval(function () {
            if (method == "show") {
                if (n < 100) {
                    n += 10;
                    if (ie) {
                        obj.style.cssText = "filter:alpha(opacity=" + n + ")";
                    } else {
                        (n == 100) ? obj.style.opacity = 1 : obj.style.opacity = "0." + n;
                    }
                } else {
                    clearTimeout(time);
                }
            } else {
                if (n > 0) {
                    n -= 10;
                    if (ie) {
                        obj.style.cssText = "filter:alpha(opacity=" + n + ")";
                    } else {
                        obj.style.opacity = "0." + n;
                    }
                } else {
                    clearTimeout(time);
                }
            }
        }, 50);
    }

但是里面没有中断，导致div频繁闪烁，影响体验效果。