Изменить текст (HTML) с .animate

Question

Я пытаюсь анимировать html-часть тега (<font id="test" size="7">This Text!</font>), используя функцию Animate в jQuery, например:

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

Однако ничего не происходит, текст не изменяется.

Как я могу это сделать?Спасибо!

Answer 1

Сигнатура функции animate(..) имеет вид:

.animate( properties, options );

И она говорит следующее о параметре properties:

свойства Aкарта свойств CSS, к которой будет перемещаться анимация.

text не является свойством CSS, поэтому функция работает не так, как вы ожидали.

Хотите, чтобы текст исчез?Вы хотите переместить это?Я мог бы предоставить альтернативу.

Посмотрите на следующую скрипку .

Answer 2

Я искал что-то подобное несколько дней назад, но так как у меня не было много времени, я в итоге использовал более легкий fadeIn / fadeOut, как и другие отвечали.

Но идея анимации текста не покидала мой разум, и в дальнейшем я закодировал свой собственный плагин (названный jquery-bubble-text ).

Вы можете проверить это на github , или посмотреть это jsfiddle .

Синтаксис следующий:

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

Надеюсь, вам понравится:)

Answer 3

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

Answer 4

Для fadeOut => изменить текст => эффект fadeIn Нам нужно анимировать оболочку текстов, которые мы хотели бы изменить.

Пример ниже:

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 5

Если все, что вам нужно, это изменить текст, который вы можете сделать именно так, как сказал Кевин.Но если вы пытаетесь запустить анимацию, а также изменить текст, вы можете сделать это, сначала изменив текст, а затем запустив анимацию.

Например:

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

Проверьтеэта скрипка для полного примера:

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

Answer 6

Следуя предложению 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 7

см. официальный пример jquery : и играйте с ним.

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