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：

的内容

属性CSS属性的映射动画将走向。

text不是CSS属性，这就是函数无法正常工作的原因。

你想淡出文字吗？你想搬家吗？我或许可以提供替代方案。

查看following fiddle。

Answer 2

我几天前正在寻找类似的东西，但由于我没有太多时间，我最终使用了更容易的fadeIn / fadeOut，正如其他人已经回答的那样。

但是动画文本的想法并没有让我想到，我进一步编写了自己的插件（名为 jquery-bubble-text ）。

您可以在github上查看，或查看此jsfiddle。

语法如下：

activesupport (5.0.0.beta3) lib/active_support/inflector/methods.rb:259:in `const_get'
activesupport (5.0.0.beta3) lib/active_support/inflector/methods.rb:259:in `block in constantize'
activesupport (5.0.0.beta3) lib/active_support/inflector/methods.rb:257:in `each'
activesupport (5.0.0.beta3) lib/active_support/inflector/methods.rb:257:in `inject'
activesupport (5.0.0.beta3) lib/active_support/inflector/methods.rb:257:in `constantize'
activesupport (5.0.0.beta3) lib/active_support/core_ext/string/inflections.rb:66:in `constantize'
app/helpers/application_helper.rb:3:in `present'
app/views/events/index.html.erb:1:in `_app_views_events_index_html_erb__1682590753278671208_70298040094320'
actionview (5.0.0.beta3) lib/action_view/template.rb:158:in `block in render'
activesupport (5.0.0.beta3) lib/active_support/notifications.rb:166:in `instrument'
actionview (5.0.0.beta3) lib/action_view/template.rb:348:in `instrument'
actionview (5.0.0.beta3) lib/action_view/template.rb:156:in `render'
actionview (5.0.0.beta3) lib/action_view/renderer/template_renderer.rb:54:in `block (2 levels) in render_template'
actionview (5.0.0.beta3) lib/action_view/renderer/abstract_renderer.rb:42:in `block in instrument'
activesupport (5.0.0.beta3) lib/active_support/notifications.rb:164:in `block in instrument'
activesupport (5.0.0.beta3) lib/active_support/notifications/instrumenter.rb:21:in `instrument'
activesupport (5.0.0.beta3) lib/active_support/notifications.rb:164:in `instrument'
actionview (5.0.0.beta3) lib/action_view/renderer/abstract_renderer.rb:41:in `instrument'
actionview (5.0.0.beta3) lib/action_view/renderer/template_renderer.rb:53:in `block in render_template'
actionview (5.0.0.beta3) lib/action_view/renderer/template_renderer.rb:61:in `render_with_layout'
actionview (5.0.0.beta3) lib/action_view/renderer/template_renderer.rb:52:in `render_template'
actionview (5.0.0.beta3) lib/action_view/renderer/template_renderer.rb:14:in `render'
actionview (5.0.0.beta3) lib/action_view/renderer/renderer.rb:42:in `render_template'
actionview (5.0.0.beta3) lib/action_view/renderer/renderer.rb:23:in `render'
actionview (5.0.0.beta3) lib/action_view/rendering.rb:103:in `_render_template'
actionpack (5.0.0.beta3) lib/action_controller/metal/streaming.rb:217:in `_render_template'
actionview (5.0.0.beta3) lib/action_view/rendering.rb:83:in `render_to_body'
actionpack (5.0.0.beta3) lib/action_controller/metal/rendering.rb:52:in `render_to_body'
actionpack (5.0.0.beta3) lib/action_controller/metal/renderers.rb:144:in `render_to_body'
actionpack (5.0.0.beta3) lib/abstract_controller/rendering.rb:25:in `render'
actionpack (5.0.0.beta3) lib/action_controller/metal/rendering.rb:36:in `render'
actionpack (5.0.0.beta3) lib/action_controller/metal/instrumentation.rb:43:in `block (2 levels) in render'
activesupport (5.0.0.beta3) lib/active_support/core_ext/benchmark.rb:12:in `block in ms'
/usr/local/Cellar/ruby/2.2.3/lib/ruby/2.2.0/benchmark.rb:303:in `realtime'
activesupport (5.0.0.beta3) lib/active_support/core_ext/benchmark.rb:12:in `ms'
actionpack (5.0.0.beta3) lib/action_controller/metal/instrumentation.rb:43:in `block in render'
actionpack (5.0.0.beta3) lib/action_controller/metal/instrumentation.rb:86:in `cleanup_view_runtime'
activerecord (5.0.0.beta3) lib/active_record/railties/controller_runtime.rb:25:in `cleanup_view_runtime'
actionpack (5.0.0.beta3) lib/action_controller/metal/instrumentation.rb:42:in `render'
actionpack (5.0.0.beta3) lib/action_controller/metal/implicit_render.rb:19:in `default_render'
actionpack (5.0.0.beta3) lib/action_controller/metal/basic_implicit_render.rb:4:in `block in send_action'
actionpack (5.0.0.beta3) lib/action_controller/metal/basic_implicit_render.rb:4:in `tap'
actionpack (5.0.0.beta3) lib/action_controller/metal/basic_implicit_render.rb:4:in `send_action'
actionpack (5.0.0.beta3) lib/abstract_controller/base.rb:183:in `process_action'
actionpack (5.0.0.beta3) lib/action_controller/metal/rendering.rb:30:in `process_action'
actionpack (5.0.0.beta3) lib/abstract_controller/callbacks.rb:20:in `block in process_action'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:126:in `call'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:126:in `call'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:506:in `block (2 levels) in compile'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:455:in `call'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:455:in `call'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:101:in `__run_callbacks__'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:750:in `_run_process_action_callbacks'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:90:in `run_callbacks'
actionpack (5.0.0.beta3) lib/abstract_controller/callbacks.rb:19:in `process_action'
actionpack (5.0.0.beta3) lib/action_controller/metal/rescue.rb:27:in `process_action'
actionpack (5.0.0.beta3) lib/action_controller/metal/instrumentation.rb:31:in `block in process_action'
activesupport (5.0.0.beta3) lib/active_support/notifications.rb:164:in `block in instrument'
activesupport (5.0.0.beta3) lib/active_support/notifications/instrumenter.rb:21:in `instrument'
activesupport (5.0.0.beta3) lib/active_support/notifications.rb:164:in `instrument'
actionpack (5.0.0.beta3) lib/action_controller/metal/instrumentation.rb:29:in `process_action'
actionpack (5.0.0.beta3) lib/action_controller/metal/params_wrapper.rb:248:in `process_action'
activerecord (5.0.0.beta3) lib/active_record/railties/controller_runtime.rb:18:in `process_action'
actionpack (5.0.0.beta3) lib/abstract_controller/base.rb:128:in `process'
actionview (5.0.0.beta3) lib/action_view/rendering.rb:30:in `process'
actionpack (5.0.0.beta3) lib/action_controller/metal.rb:190:in `dispatch'
actionpack (5.0.0.beta3) lib/action_controller/metal.rb:262:in `dispatch'
actionpack (5.0.0.beta3) lib/action_dispatch/routing/route_set.rb:50:in `dispatch'
actionpack (5.0.0.beta3) lib/action_dispatch/routing/route_set.rb:32:in `serve'
actionpack (5.0.0.beta3) lib/action_dispatch/journey/router.rb:39:in `block in serve'
actionpack (5.0.0.beta3) lib/action_dispatch/journey/router.rb:26:in `each'
actionpack (5.0.0.beta3) lib/action_dispatch/journey/router.rb:26:in `serve'
actionpack (5.0.0.beta3) lib/action_dispatch/routing/route_set.rb:724:in `call'
actionview (5.0.0.beta3) lib/action_view/digestor.rb:12:in `call'
rack (2.0.0.alpha) lib/rack/etag.rb:25:in `call'
rack (2.0.0.alpha) lib/rack/conditional_get.rb:25:in `call'
rack (2.0.0.alpha) lib/rack/head.rb:12:in `call'
rack (2.0.0.alpha) lib/rack/session/abstract/id.rb:220:in `context'
rack (2.0.0.alpha) lib/rack/session/abstract/id.rb:214:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/cookies.rb:613:in `call'
activerecord (5.0.0.beta3) lib/active_record/query_cache.rb:36:in `call'
activerecord (5.0.0.beta3) lib/active_record/connection_adapters/abstract/connection_pool.rb:963:in `call'
activerecord (5.0.0.beta3) lib/active_record/migration.rb:558:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:97:in `__run_callbacks__'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:750:in `_run_call_callbacks'
activesupport (5.0.0.beta3) lib/active_support/callbacks.rb:90:in `run_callbacks'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/callbacks.rb:27:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/reloader.rb:71:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/debug_exceptions.rb:49:in `call'
web-console (3.1.1) lib/web_console/middleware.rb:131:in `call_app'
web-console (3.1.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.1.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.1.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.0.0.beta3) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.0.0.beta3) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.0.0.beta3) lib/active_support/tagged_logging.rb:70:in `block in tagged'
activesupport (5.0.0.beta3) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.0.0.beta3) lib/active_support/tagged_logging.rb:70:in `tagged'
railties (5.0.0.beta3) lib/rails/rack/logger.rb:24:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/request_id.rb:24:in `call'
rack (2.0.0.alpha) lib/rack/method_override.rb:22:in `call'
rack (2.0.0.alpha) lib/rack/runtime.rb:22:in `call'
activesupport (5.0.0.beta3) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/load_interlock.rb:13:in `call'
actionpack (5.0.0.beta3) lib/action_dispatch/middleware/static.rb:136:in `call'
rack (2.0.0.alpha) lib/rack/sendfile.rb:111:in `call'
railties (5.0.0.beta3) lib/rails/engine.rb:522:in `call'
puma (3.4.0) lib/puma/configuration.rb:224:in `call'
puma (3.4.0) lib/puma/server.rb:569:in `handle_request'
puma (3.4.0) lib/puma/server.rb:406:in `process_client'
puma (3.4.0) lib/puma/server.rb:271:in `block in run'
puma (3.4.0) lib/puma/thread_pool.rb:114:in `call'
puma (3.4.0) lib/puma/thread_pool.rb:114:in `block in spawn_thread'

希望你喜欢它：）

Answer 3

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

Answer 4

遵循JiminP的建议......

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

一个范围淡出同时另一个范围渐渐消失
一个范围淡出，然后另一个范围淡入。

第一次单击该按钮时，将出现上面的数字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

对于fadeOut =＆gt;改变文字=＆gt;淡出效果我们需要为我们想要改变的文本包装设置动画。

以下示例：

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

在此文章中查看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 8

参考official jquery example：并使用它。

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

Answer 9

在这里，我使用@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);

使用.animate更改文本（html）

9 个答案:

HTML

JQuery JS