更改文本（HTML）與.animate

68

的animate(..)功能」的簽名是：

.animate(properties, options);

它說下面的有關參數properties：

性質動畫會朝着CSS屬性的映射。

text不是CSS屬性，這就是爲什麼函數不能按照你的預期工作。

你想淡出文本嗎？你想移動它嗎？我可能會提供一個替代方案。

看看following fiddle。

來源

2011-06-10 11:34:10 Kevin

+0

我希望文字改變，其效果是舊文本淡出，而新的文字消失在:) – Jeff 2011-06-10 11:50:01

+4

@Jeff：我已經更新了我的答案，看看小提琴。 – Kevin 2011-06-10 12:02:06

+0

在那裏，歡呼！ :) – Jeff 2011-06-10 12:05:06

1

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

來源

2013-02-13 23:36:01 ClearCloud8

1

如果你希望做的是改變凱文說你可以做的完全文本。但是，如果您嘗試運行動畫以及更改文字，則可以通過先更改文字然後運行動畫來完成此操作。

例如：

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

看看這個搗鼓完整的例子：

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

來源

2013-11-15 16:14:31 Twig

+1

實際上，你可以通過函數：$（...）。html（...）。animate（...）;' – 2016-06-21 18:29:58

3

我一直在尋找類似的東西，前幾天，但我並沒有太多時間，我結束了使用更容易的fadeIn/fadeOut，正如其他人所回答的。

但動畫文本的想法並沒有留下我的想法，我進一步編碼我自己的插件（名爲jquery-bubble-text）。

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

的語法如下：

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

希望你喜歡它:)

來源

2016-06-17 17:19:59

1

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

來源

2017-10-07 03:11:55 jalmatari

+0

再次向下選民，我在生產中稍微修改了這個代碼。 +1。向下投票者：請在投票前測試任何代碼。違規！ – wpcoder 2017-11-03 23:34:53

+1

@wpcoder我沒有在這個答案上投票，但我認爲它是downvoted，因爲它只是顯示一些代碼沒有任何解釋。一些用戶低估了答案而沒有解釋爲低質量答案。 – 2017-11-03 23:38:24

+0

重點是;爲這個答案提供幫助或者不幫助，它幫助了我，只是改變了'.show（1000）'並且它工作。 – wpcoder 2017-11-04 02:02:03

0

指official jquery example：和它玩。

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

來源

2017-11-03 23:29:28 wpcoder

更改文本（HTML）與.animate

回答

相關問題