css3、jq、js三种方法实现逐渐消失 |
您所在的位置：网站首页 › html鼠标下滑逐渐出现页面 › css3、jq、js三种方法实现逐渐消失 |
|
html：
div会逐渐消失
css3：
.hideSlow{
background: #a40808;
color: #fff;
animation: hidetip 5s 1;
animation-fill-mode: forwards;
-webkit-animation: showtip 5s 1;
-webkit-animation-fill-mode: forwards;
}
@keyframes hidetip {
from {
opcity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes hidetip {
from {
opcity: 1;
}
to {
opacity: 0;
}
}
jq：
$(".hideSlow").fadeOut(3000);
$(".hideSlow").fadeTo("3000",0.7);
jQuery fadeOut() 方法用于淡出可见元素。
语法：
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
语法：
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
JS
点击按钮，3 秒后测试文字会消失 点我setTimeout()方法： setTimeout()方法用于在指定的毫秒数后调用函数活计算表达式 提示： 1000 毫秒= 1 秒。 提示： 如果你只想重复执行可以使用 setInterval() 方法。 提示： 使用 clearTimeout() 方法来阻止函数的执行。 var test = document.getElementById("hideSlow"); var count = (function() { var timer; var i = 0; function change(tar) { i++; console.log(i); console.log(test.style.opacity); var num = 1-i/100; test.style.opacity=num; if (i === tar) { clearTimeout(timer); return false; } timer = setTimeout(function() { change(tar) }, 100) } return change; })() count(100) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |