JS控制CSS实现淡出淡入的问题
通过JS，现在实现了提示的显示和隐藏，但如何实现提示淡出淡入，帮我写写，我要具体代码，谢谢。CSS代码：#spanTiShi{padding:20px;border-ra...
通过JS，现在实现了提示的显示和隐藏，但如何实现提示淡出淡入，帮我写写，我要具体代码，谢谢。
CSS代码：
#spanTiShi{
padding: 20px;
border-radius: 30px;
background: #666666;
color: #FFFFFF;
white-space: nowrap;
position:absolute;
bottom: 60px;
left: 50%;
transform:translateX(-50%);
display:none;
}
JS代码：
function showTiShi(){
document.getElementById("spanTiShi").style.display="block";
setTimeout('document.getElementById("spanTiShi").style.display="none"',5000);
} 展开
CSS代码：
#spanTiShi{
padding: 20px;
border-radius: 30px;
background: #666666;
color: #FFFFFF;
white-space: nowrap;
position:absolute;
bottom: 60px;
left: 50%;
transform:translateX(-50%);
display:none;
}
JS代码：
function showTiShi(){
document.getElementById("spanTiShi").style.display="block";
setTimeout('document.getElementById("spanTiShi").style.display="none"',5000);
} 展开
5个回答
展开全部
function showTiShi(){
var tm=0;ts=document.getElementById("spanTiShi");
ts.style.display="block";
fadeIn();
function fadeIn(){
if(tm<1){
tm+=0.1;
ts.style.opacity=tm;
setTimeout(fadeIn,100);
}else{
setTimeout(fadeOut,5000);
}
}
function fadeOut(){
if(tm>0){
tm-=0.1;
ts.style.opacity=tm;
setTimeout(fadeOut,100);
}else{
ts.style.display="none";
}
}
}
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
document.getElementById("spanTiShi").style.transition="1s";
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你应该知道jquery吧
用jquery的fadeIn()和fadeOut()方法就可以
css用改变透明度的方式也可以实现淡入淡出
用jquery的fadeIn()和fadeOut()方法就可以
css用改变透明度的方式也可以实现淡入淡出
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
可以用jQuery的fadeOut().
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Test JS Template</title>
<link href="styles/test.css" rel="stylesheet">
<script src="jQuery/jquery-3.1.1.min.js"></script>
</head>
<body>
<div>Hello world</div>
<div id="spanTiShi"> 我是p abcdefg </div>
<script>
function showTiShi() {
document.getElementById("spanTiShi").style.display="block";
setTimeout('$("#spanTiShi").fadeOut()',5000);
}
window.onload=function() {
showTiShi();
}
</script>
</body>
</html>
test.css就是你上面那一段css
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
建议直接用jquery可以简单的通过fadeOut和fadeIn事件来实现淡入淡出
$("#spanTiShi").fadeOut(5000,function(){
//5秒淡出
})
$("#spanTiShi").fadeIn(5000,function(){
//5秒淡入
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
