我有一个带有文字的讲话泡泡。我尝试使用 scale
effect
隐藏它。但是,当我这样做时,内部文本也会移动,我的意思是出现换行符,而scale effect
发生。
如何修复我的文本并将其与讲话泡泡一起隐藏?
这是我的代码:
使用Javascript:
var splash=$("#splash");
splash.html("This is a short text. Hide this text.");
splash.delay(2000).fadeIn(400).delay(1500).hide("scale",{percent: 0, direction: 'horizontal'},1000);
CSS:
#splash{
z-index:1003;
background-repeat:no-repeat;
background-position:295px 8px;
width:180px;
height:90px;
padding:8px 8px 20px 8px;
font-size:24px;
color:white;
background-color:#222222;
box-shadow:4px 4px black;
opacity:0.9;
border-radius:8px;
display:none;
}
#splash:after{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 0 12px 100px;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 1;
right: -100px;
top: 50px;
display:none;
}
HTML:
<div id="splash" style="position:absolute; left:30px; top: 100px"></div>
答案 0 :(得分:0)
我找到了解决方案 我只是阻止了css中的换行符,并在我的文本中做了manuelly。 现在这些狂野的换行符将不再出现。
现在使用javascript中的文字:
splash.html("This is a short text. <br> Hide this text.");
我在CSS中添加了这一行:
white-space: nowrap;