窗口右下角弹出消息

Html

Css

Js

    X

* { margin:0; padding:0 } #msg { width:200px; height:200px; position:fixed; right:30px; bottom:-200px; background-color:LightBlue; transition:all 2s linear; } #msg>a { float:right; padding:5px 10px; border:1px solid black; cursor:pointer; }

window.onload = function() { var msg = document.getElementById("msg"); msg.style.bottom = "0"; msg.firstElementChild.onclick = function() { //this->a msg.style.bottom = "-200px"; setTimeout(function() { msg.style.bottom = "0"; }, 2000 + 3000); } }

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

首先要在css中为msg添加transition属性，

然后获得id为msg的div，为msg下的a绑定单击事件，

利用定时器，改变元素的高度，从而实现效果