[英]How do I make the lines having classes fm and then sm appear one after the other using jQuery inside the box?
在学习jQuery时，我试图创建一个chatbox类型的界面，我想知道如何使具有fm和sm类的行一个接一个地显示。 第二行开箱即用。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WSDC STUDENT PORTAL</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row head">
<div class="col-md-2"></div>
<div class="col-md-3"><span class="name">Prashanth Sateesh</span></div>
<div class="col-md-7"></div>
</div>
<br><br><br>
<div class="row bot">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="chatbox"></div>
</div>
<div class="col-md-1"></div>
</div>
<div class="fm message"><strong> Hi.I am Prashanth and I'm studying Electronics Engineering at NIT,Warangal in India.</strong>
</div>
<div class="sm message"><strong>Welcome to my website</strong>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<script>
$(function() {
$(".chatbox").html($(".fm").hide().fadeIn(1500))
var prev = $(".chatbox").html();
$(".chatbox").html(prev + "<br>" + ($(".sm").hide().fadeIn(1500)))
});
</script>
</body>
</html>
CSS代码：
body {
margin: 0px;
background-color: #FFF8DC;
}
.head {
height: 50px;
background-color: #FFF0F5;
padding-top: 0.6%;
font-weight: bold;
font-size: 1.5em;
}
.bot {
height: 400px;
}
.chatbox {
background-color: #00FA9A;
height: 400px;
padding: 10px;
}
.message {
background-color: #87CEFA;
display: inline-block;
border-radius: 4px;
padding: 3px;
}
您的消息类显示为内联块。 如果希望项目显示在新行上，则必须将消息显示为“阻止”或手动插入换行符。
.message { background-color: #87CEFA; display: block; border-radius: 4px; padding: 3px; }
<div class="fm message"> <strong> Hi.I am Prashanth and I'm studying Electronics Engineering at NIT,Warangal in India.</strong> </div> <div class="sm message"> <strong>Welcome to my website</strong> </div>
您的功能似乎设计过度了。 你可以试试看。
$(".fm").fadeIn(1500).delay(300).fadeOut(1500).promise().done(function () {
$(".sm").fadeIn(1500);
});
第二个fadeIn等待，直到第一个用.promise完成动画设置。 我还在第一条消息的fadeIn fadeOut上添加了一个延迟，因此有时间阅读它。
你可以试试这个吗？ 您可以使用唯一的CSS。 出现fm，然后出现sm。
body { margin: 0px; background-color: #FFF8DC; } .head { height: 50px; background-color: #FFF0F5; padding-top: 0.6%; font-weight: bold; font-size: 1.5em; } .bot { height: 400px; } .chatbox { background-color: #00FA9A; height: 400px; padding: 10px; } .message { background-color: #87CEFA; display: inline-block; border-radius: 4px; padding: 3px; } .fm, .sm {opacity:0} @-webkit-keyframes fadein { 0% { display:block;opacity:0 } 100% { display:block;opacity: 1; } } @-moz-keyframes fadein { 0% { display:block;opacity:0 } 100% { display:block;opacity: 1; } } @-o-keyframes fadein { 0% { display:block;opacity:0 } 100% { display:block;opacity: 1; } } @keyframes fadein { 0% { display:block;opacity:0 } 100% { display:block;opacity: 1; } } .fm{ -webkit-animation: fadein 2s forwards; /* Safari 4+ */ -moz-animation: fadein 2s forwards forwards; /* Fx 5+ */ -o-animation: fadein 2s forwards; /* Opera 12+ */ animation: fadein 2s forwards; /* IE 10+, Fx 29+ */ } .sm{ -webkit-animation: fadein 2s 1s forwards; /* Safari 4+ */ -moz-animation: fadein 2s 1s forwards; /* Fx 5+ */ -o-animation: fadein 2s 1s forwards; /* Opera 12+ */ animation: fadein 2s 1s forwards; /* IE 10+, Fx 29+ */ }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container-fluid"> <div class="fm message"><strong> Hi.I am Prashanth and I'm studying Electronics Engineering at NIT,Warangal in India.</strong></div> <div class="sm message"><strong>Welcome to my website</strong></div> </div> </body> </html>
如何使用 javascript 使多个 div 一个接一个出现？
[英]How to make multiple divs appear one after the other using javascript?
从SuiteScript的下拉菜单中选择选项后，如何显示文本框？
[英]How do I make a text box appear after selecting an option from a drop-down menu in SuiteScript?
如何使内容在另一个下方显示（例如 <li> 列表）在悬停中使用jquery / js
[英]How to make a content appear one below the other (like an <li> list) in hover using jquery/js
如何使用JavaScript / JQuery在页面上显示html框？
[英]How to make a html box appear on page using JavaScript/JQuery?
如何在不触发同一类的其他元素的情况下显示一个元素
[英]How do I make one element appear without triggering other elements of the same class
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.