Jquery 使用.animate更改文本（html）

我正在尝试使用jQuery的animate函数对标记的html部分（

此文本！

）设置动画，如下所示：

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

无论发生什么，它都不会改变文本

我该怎么做？谢谢

函数的签名是：

.animate( properties, options );

关于参数

属性

，它说明了以下内容：

属性CSS属性的映射 动画将移向

text

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

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

---

按照JiminP的建议，看一下。

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

一个音域与另一个音域同时淡出

一个音域淡出，然后另一个音域淡入

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

试试看：

详情：

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

HTML

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);
        });   
    }    
}

---

如果你想做的只是改变文本，你可以完全按照凯文说的做。但是，如果您试图运行动画以及更改文本，则可以通过先更改文本，然后运行动画来完成此操作

例如：

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

查看此小提琴以了解完整示例：

更新：

另一个简单的方法：

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

参考：并玩它

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

---

对于淡出=>更改文本=>淡出效果 我们需要动画的文本包装，我们想改变

示例如下：

HTML

---

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

请参阅本文中的Davion's anwser：

HTML:

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

---

如果您想“顺利”更改文本，您可以使用两个

重叠并做一些工作。或者，如果您只想“立即”更改文本，可以使用

.text（）

。PS：您可以使用

来进行样式设置，而不是

。我想更改文本，使旧文本淡出，而新文本淡入：）伟大而简单的解决方案。谢谢。当光标悬停在远处时，如何使旧文本返回？为什么只需几行代码就可以使用外部链接？实际上，您可以使用以下函数：

$（…）.html（…）.animate（…）再一次，我在生产中使用了这段代码，只是做了一些修改+1.否决投票人：请在否决投票前测试任何代码。冒犯@wpcoder我没有对这个答案投票，但我认为它被否决了，因为它只是显示了一些代码，没有任何解释。一些用户在没有解释的情况下将答案作为低质量的答案进行了否决；这个答案是否有帮助，它帮助了我，只是改变了
.show（1000）
，它起了作用。用fadeIn淡出代替隐藏显示看起来最平滑，但这是一个很好的解决方案
$("#test").fadeOut(400, function() {
    $(this).html("......").fadeIn(400);
});

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

<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>

$(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);
    })

  });

});

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

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