Question

我有段落的文字，其中段落中的某些字词或部分应该转换为红色 - ＆gt;增加字体大小，几秒钟后恢复正常字体大小，同时保持红色突出显示。（所有这些我都有CSS过渡功能和Jquery将类添加到span对象中）但是 - 我的目标是在字体大小增加时不会导致周围段落文本移位/调整/折叠，从而实现增长/缩小回报。

应该如下图所示。如何才能使这种效果发挥作用并防止周围文本转移/调整？

https://api.jquery.com/deferred.resolveWith/

查看SNIPPET FULL SCREEN - 看起来内嵌div窗口错误

＆＃13;

$('#svcdef p').each(function(index) {
  var li = $(this);

  setTimeout(function() {
    li.slideDown(900);
  }, 500 * index);

  setTimeout(function() {
    $('#svcdef p span').addClass('cfred');
  }, 3000);

  setTimeout(function() {
    $('#svcdef p span').removeClass('cfred');
    $('#svcdef p span').css('color', 'red');
  }, 8000);
});

＆＃13;

#svcdef {
  text-align: left;
  height: 820px !important;
  color: #FFFFFF;
  text-align: justify;
  overflow: hidden;
  background-color: black;
}
#svcdef p {
  padding-left: 8px;
  padding-right: 8px;
}
#svcdef p span {
  transition: color 4s, font-size 2s ease-in-out;
}
.cfred {
  color: red;
  font-size: 24px;
}
#svc-content {
  height: 490px;
  float: left;
  width: 550px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:yellow;"><b>REPUTATION MANAGEMENT</b>
</div>
<style scoped="scoped">
  p {
    display: none;
  }
</style>
<br />
<div id="svcdef" class="modern-skin">
  <p><i><b>"It takes many good deeds to build a good reputation, and only one bad one to lose it."</b></i> • Benjamin Franklin
    <br>
    <br>
  </p>
  <p>Warren Buffet - Business magnate, Investor and philanthropist once stated "It takes 20 years to build a reputation and five minutes to ruin it. If you think about that, you’ll do things differently." Although a positive reputation for a brand and company
    does not in fact take 20 years to build, it is <span>possible</span> for a single instance of negative consumer engagement to immediately cause <span>20 years</span> or more of damage dependinging on the events that transpired and the manner in which
    the consumer shares the experience. Before the internet, many <span>companies were shielded</span> from negative events occuring with their potential customers, word of mouth remained the the primary means of communicating displeasure and the social
    network of other consumers that a negatively impacted customer could reach was curtailed and more localized. Thus damage could be more easliy mitigated or in some cases ignored.</p>
  <br />
  <p>some other paragraph
  </p>
  <br />
  <p>Yet, another useless paragraph</p>
</div>

＆＃13;

Answer 1

你的意思是这样吗？

＆＃13;

body {
  font-size: 25px;
}
boo{
   display:inline-block;
   transform:scale(1);
   transition: all 100ms linear;
}
boo:hover{
  color: red;
  transform:scale(2);
  transition: all 100ms linear;
}

＆＃13;

<ol>
<li>This is the test sentence</li>
<li>This is the <boo>test (hover me ;)</boo> sentence</li>
<li>This is the test sentence</li>
</ol>

＆＃13;

jQuery示例：

＆＃13;

var boo = 0;
setInterval(function(){
    boo==0?$("boo").addClass("booable"):$("boo").removeClass("booable");
    boo=!boo;
},100)

＆＃13;

body {
  font-size: 25px;
}
boo {
  display: inline-block;
  transform: scale(1);
  transition: all 100ms linear;
}
.booable{
  color: red;
  transform: scale(2);
  transition: all 100ms linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>This is the test sentence</li>
  <li>This is the <boo>test</boo> sentence</li>
  <li>This is the test sentence</li>
</ol>

＆＃13;

动画生长/缩小文本没有段落移位

1 个答案: