Question

在我的网站上，我用JS更改文本。此文本更改可以移动边框或可以调整文本的背景。这种情况会立即发生。所以我的问题是如何通过动画使这种变化顺利进行。

提前谢谢。

Answer 1

这样的事情可以解决问题：

$('button').on('click', function() {
  var newText= '<p>Quo ridiculus, faucibus?</p>';

  var $text = $('#the-text');

  // get the current height
  var oldHeight = $text.height();

  // change the text and get the new height
  $text.html(newText);
    var newHeight = $text.height();

    // set the height back to the old value
  $text.css({
    height: oldHeight
  });

  // animate to the new height
  $text.animate({height: newHeight}, 500);

});

https://jsfiddle.net/ohx7nzsh/

基本上是这样的：

您获得当前身高
您交换文字
你获得了新的高度
您将高度设置为旧值
你动画到新的高度

请注意，您需要在文本元素上使用overflow: hidden，就像我在小提琴中所做的那样。

使用CSS / JS更改内容动画

1 个答案: