使用 .animate 更改文本 (html)

Question

我正在尝试使用 jQuery 的 Animate 函数为标签 (<font id="test" size="7">This Text!</font>) 的 html 部分设置动画，如下所示：

$("#test").delay(1500).animate({text:'The text has now changed!'},500);

但是什么也没发生，它不会改变文本。

我该怎么做？谢谢！

Answer 1

animate(..) 函数的签名是：

.animate( properties, options );

关于参数properties的内容如下：

properties CSS 属性的映射 动画将朝着。

text 不是 CSS 属性，这就是函数无法按预期工作的原因。

您要淡出文本吗？你想移动它吗？我也许可以提供一个替代方案。

看看following fiddle。

Answer 2

$("#test").hide(100, function() {
    $(this).html("......").show(100);
});

更新：

另一种简单的方法：

$("#test").fadeOut(400, function() {
    $(this).html("......").fadeIn(400);
});

Answer 3

在这篇文章中查看 Davion 的回答： https://stackoverflow.com/a/26429849/1804068

HTML：

<div class="parent">
    <span id="mySpan">Something in English</span>
</div>

JQUERY

$('#mySpan').animate({'opacity': 0}, 400, function(){
        $(this).html('Something in Spanish').animate({'opacity': 1}, 400);    
    });

Live example

Answer 4

按照 JiminP 的建议......

我制作了一个 jsFiddle，它将在两个跨度之间“平滑”过渡，以防有人有兴趣看到这一点。您有两个主要选择：

1. 一个跨度淡出同时另一个跨度淡入
2. 一个跨度淡出随后另一个跨度淡入。

第一次单击按钮时，将出现上面的数字 1。第二次单击该按钮时，将出现数字 2。 （我这样做是为了让您可以直观地比较这两种效果。）

试试看：http://jsfiddle.net/jWcLz/594/

详情：

上面的第 1 点（更难的效果）是通过使用绝对定位的 CSS 将跨度直接放在彼此之上来实现的。此外，jQuery 动画没有链接在一起，因此它们可以同时执行。

HTML

<div class="onTopOfEachOther">
    <span id='a'>Hello</span>
    <span id='b' style="display: none;">Goodbye</span>
</div>

<br />
<br />

<input type="button" id="btnTest" value="Run Test" />

CSS

.onTopOfEachOther {
    position: relative;
}
.onTopOfEachOther span {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

$('#btnTest').click(function() {        
    fadeSwitchElements('a', 'b');    
}); 

function fadeSwitchElements(id1, id2)
{
    var element1 = $('#' + id1);
    var element2 = $('#' + id2);

    if(element1.is(':visible'))
    {
        element1.fadeToggle(500);
        element2.fadeToggle(500);
    }
    else
    {
         element2.fadeToggle(500, function() {
            element1.fadeToggle(500);
        });   
    }    
}

Answer 5

如果您只想更改文本，您可以完全按照凯文所说的那样做。但是，如果您尝试运行动画并更改文本，则可以通过首先更改文本然后运行动画来完成此操作。

例如：

$("#test").html('The text has now changed!');
$("#test").animate({left: '100px', top: '100px'},500);

查看这个小提琴的完整示例：

http://jsfiddle.net/Twig/3krLh/1/

Answer 6

对于淡出 => 更改文本 => 淡入效果 我们需要为想要更改的文本的包装设置动画。

下面的例子：

HTML

<div class="timeline-yeardata">
  <div class="anime">
    <div class="ilosc-sklepow-sticker">
      <span id="amount">1400</span><br>
      sklepów
    </div>

    <div class="txts-wrap">
      <h3 class="title">Some text</h3>
      <span class="desc">Lorem ipsum description</span>
    </div>

    <div class="year-bg" id="current-year">2018</div>
  </div>
</div>


<div class="ch-timeline-wrap">
  <div class="ch-timeline">
    <div class="line"></div>

    <div class="row no-gutters">
      <div class="col">
        <a href="#2009" data-amount="9" data-y="2009" class="el current">
          <span class="yr">2009</span>
          <span class="dot"></span>

          <span class="title">Lorem  asdf asdf asdf a</span>
          <span class="desc">Ww wae awer awe rawer aser as</span>
        </a>
      </div>
      <div class="col">
        <a href="#2010" data-amount="19" data-y="2010" class="el">
          <span class="yr">2010</span>
          <span class="dot"></span>

          <span class="title">Lorem brernern</span>
          <span class="desc">A sd asdkj aksjdkajskd jaksjd kajskd jaksjd akjsdk jaskjd akjsdkajskdj akjsd k</span>
        </a>
      </div>
    </div>
  </div>
</div>

JQuery JS

$(document).ready(function(){

  $('.ch-timeline .el').on('click', function(){

    $('.ch-timeline .el').removeClass('current');
    $(this).addClass('current');

    var ilosc = $(this).data('ilosc');
    var y = $(this).data('y');
    var title = $(this).find('.title').html();
    var desc = $(this).find('desc').html();

    $('.timeline-yeardata .anime').fadeOut(400, function(){
      $('#ilosc-sklepow').html(ilosc);
      $('#current-year').html(y);
      $('.timeline-yeardata .title').html(title);
      $('.timeline-yeardata .desc').html(desc);
      $(this).fadeIn(300);
    })

  });

});

希望这会对某人有所帮助。

Answer 7

参考official jquery example: 和它一起玩。

.animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );

Answer 8

在这里，我使用@Hoàng Vũ Tgtt 的回答提出了这种自动转换并做了这个。

HTML

<h3 id="textAnimator"></h3>

jQuery

var currentIndex = 0;
var texts = [
  'What is Lorem Ipsum?',
  'Why do we use it?',
  'Where does it come from?',
  'Where can I get some?',
  'The standard Lorem Ipsum passage',
];

$('#textAnimator').html(texts[currentIndex]);

function animateText(){
 $('#textAnimator').animate({'opacity' : 0}, 400, function(){
   var $this = $(this);
     $('#textAnimator').html(texts[currentIndex]).animate({'opacity': 1}, 400);
     if(currentIndex == texts.length - 1){
       currentIndex = 0;
     } else {
       currentIndex += 1;
     }
 });
}

setInterval(function(){
    animateText();
}, 3000);