Измените текст (html) на .animate

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

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

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

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

Ответы

Ответ 1

Функция animate(..):

.animate( properties, options );

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

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

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

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

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

Ответ 2

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

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

Вы можете проверить его на github или увидеть это jsfiddle.

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

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

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

Ответ 3

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

Ответ 4

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

Пример:

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

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

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

Ответ 5

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

Ответ 6

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

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