首页手记 display实现淡入淡出过渡效果

display实现淡入淡出过渡效果

标签：

JQuery

display实现淡入淡出过渡效果

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div {            position: relative;        }        input {/*按钮样式*/            cursor: pointer;            border: none;            outline: none;            background: #34BC9D;            color: #fff;            height: 40px;        }        img {            position: absolute;            transition: 1s;            left: 0;            top: 100%;            opacity: 0;            cursor: pointer;            display: none;        }    </style></head><body>    <div>        <input id="root" type="button" onclick="show()" value="点击显示图片">        <img id="img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt="">    </div><script>    var root = document.getElementById("root");    var img = document.getElementById("img");    function show(){        if(root.value === "点击显示图片"){            root.value = "点击隐藏图片";            /*设置setTimeout，让display先执行，opacity后执行*/            img.style.display = "block";            setTimeout(function () {                img.style.opacity = 1;            },.1);        }else{            root.value = "点击显示图片";            img.style.opacity = 0;            /*隐藏需要先执行opacity，再执行display，否则无效*/            setTimeout(function () {                img.style.display = "none";            },900);        }    }</script></body></html>

点击查看更多内容