在不移动文本内部的情况下对元素进行缩放效果

时间:2015-04-08 10:39:36

标签: javascript jquery html css hide

我有一个带有文字的讲话泡泡。我尝试使用 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>

1 个答案:

答案 0 :(得分:0)

我找到了解决方案 我只是阻止了css中的换行符,并在我的文本中做了manuelly。 现在这些狂野的换行符将不再出现。

现在使用javascript中的文字:

splash.html("This is a short text. <br> Hide this text.");

我在CSS中添加了这一行:

white-space: nowrap;