web-dev-qa-db-ja.com

.animateを使用してテキスト（html）を変更する

タグのhtml部分をアニメーション化しようとしています（<font id="test" size="7">This Text!</font>）jQueryのAnimate関数を次のように使用します。

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

しかし、何も起こらず、テキストは変更されません。

これどうやってするの？ありがとう！

jqueryhtmltextjquery-animate
39
Jeff

animate(..) 関数のシグネチャは次のとおりです。

.animate( properties, options );

そして、パラメータpropertiesについて次のように述べています：

propertiesアニメーションが移動するCSSプロパティのマップ。

textはCSSプロパティではないため、関数が期待どおりに機能しないのはこのためです。

テキストをフェードアウトしますか？移動しますか？別の方法を提供できるかもしれません。

フィドルに続く をご覧ください。

76
Kevin

数日前にそのようなものを探していましたが、あまり時間がないので、他の人が答えたように、より簡単なfadeIn/fadeOutを使用することになりました。

しかし、テキストをアニメーション化するという考えは頭に残りませんでした。さらに、独自のプラグインをコーディングしました（jquery-bubble-text）。

github で確認するか、または jsfiddle で確認できます。

構文は次のとおりです。

bubbleText({
    element: $element,      // must be one DOM leaf node
    newText: 'new Text',    // must be one string
});

楽しんでください ：）

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

ケビンが言ったようにあなたがやろうとしているのがあなたができるテキストを変更するだけであるなら。ただし、アニメーションを実行してテキストを変更しようとしている場合は、最初にテキストを変更してからアニメーションを実行することでこれを実現できます。

例えば：

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

完全な例については、このフィドルをご覧ください。

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

1
Twig

JiminPの提案に従って...

誰かがこれを実際に見ることに興味がある場合に備えて、2つのスパン間を「スムーズに」移行するjsFiddleを作成しました。主に2つのオプションがあります。

  1. 一方のスパンがフェードアウトすると同時にもう一方のスパンがフェードインする
  2. 1つのスパンがフェードアウトし、その後にもう1つのスパンがフェードインします。

ボタンを初めてクリックすると、上記の番号1が表示されます。ボタンを2回クリックすると、2番が発生します。 （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);
        });   
    }    
}
1
ClearCloud8

FadeOut => change text => fadeIn effectの場合、変更したいテキストのラッパーをアニメーション化する必要があります。

以下の例：

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

  });

});

これが誰かを助けることを願っています。

1
denesis

公式のjqueryの例 ：を参照し、それで遊んでください。

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