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>
           

完