javascript 函数和 HTML 中的文本转换/动画 onclick [英] Text transition/animation onclick in javascript function and HTML
本文介绍了javascript 函数和 HTML 中的文本转换/动画 onclick的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个按钮在点击时触发此功能:
<button onclick="showAdvice()">忠告！</button><p id="文本"></p><脚本>函数 showAdvice() {var 建议 = ["1","2","3"];var choose = Math.floor(Math.random() * advices.length);document.getElementById("text").innerHTML = 建议[选择];}onclick 动作在文本"段落中生成建议，它们以随机顺序出现.我希望它们之间有一个过渡 - 不透明度、淡出/淡入.我如何在 CSS/JavaScript 中实现这一点?
解决方案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><!DOCTYPE html><style type="text/css" media="screen">#pContainer {位置:相对；溢出:隐藏；宽度:200px；高度:200px；}#pContainer >p{位置:绝对；顶部:0；左:0；过渡:不透明度 0.5s 线性；}#pContainer >p.show {不透明度:1；}#pContainer >p.隐藏{不透明度:0；}</风格><头><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><身体><button onclick="showAdvice()">建议！</button><div id="pContainer"><p id="text" class="show"></p><p id="text02" class="隐藏"></p><脚本>函数 showAdvice() {var 建议 = ["1","2","3"];var choose = Math.floor(Math.random() * advices.length);$('#pContainer p.hide').text(建议[选择]).removeClass('隐藏').addClass('显示').siblings('p').removeClass('show').addClass('隐藏');}</html>
I have a button triggering this function on click:
<button onclick="showAdvice()">Advice!</button>
<p id="text"></p>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
document.getElementById("text").innerHTML = advices[choose];
}
</script>
The onclick action generates advices in "text" paragraph, they appear in random order. I want them to have a transition in between - opacity, fade out/fade in. How can I achieve this in CSS/JavaScript?
解决方案
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<style type="text/css" media="screen">
#pContainer {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
}
#pContainer > p {
position: absolute;
top: 0;
left: 0;
transition: opacity 0.5s linear;
}
#pContainer > p.show {
opacity: 1;
}
#pContainer > p.hide {
opacity: 0;
}
</style>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<button onclick="showAdvice()">Advice!</button>
<div id="pContainer">
<p id="text" class="show"></p>
<p id="text02" class="hide"></p>
</div>
<script>
function showAdvice() {
var advices = ["1","2","3"];
var choose = Math.floor(Math.random() * advices.length);
$('#pContainer p.hide')
.text(advices[choose])
.removeClass('hide')
.addClass('show')
.siblings('p')
.removeClass('show')
.addClass('hide');
}
</script>
</body>
</html>
这篇关于javascript 函数和 HTML 中的文本转换/动画 onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
