如何在使用jQuery之後更改文本？

我從來沒有用過jQuery，我想問一下如何做一些對你來說可能很簡單的事情。我環顧四周，但找不到答案。如何在使用jQuery之後更改文本？

好吧，說我有一個HTML文件;

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
</head> 
<body> 
<h1>Hello world!</h1> 
<p>Here is a message: <span id="message"></span></p> 
</body> 
</html>

我想問的是如何創建一個字符串列表，並在頁面加載時顯示在第一位的，指定時間的隨機時間間隔後，切換到下一個，依此類推，也許大約5條消息後，它會將用戶重定向到不同的頁面。

如果我的信息是：

Hello! 
This is a website! 
You are now going to be redirected. 
Are you ready? 
You're now being redirected...

在我真正的網站這將是很好，如果消息可以從用戶隱藏（在頁面上，但在一個CSS/JS文件，將被罰款）並且當下一條消息進來時它有很好的淡入淡出效果。

有人可以向我解釋如何工作嗎？

我只想補充一點，我沒有jQuery的經驗（在JavaScript中只有一點點），我不知道腳本/函數的位置。有人能告訴我如何，或鏈接到一個初學者指南，告訴我這個？

來源

2011-12-25 Alex

這裏是一個辦法做到這一點（jsfiddle demo）：

function nextMsg() { 
    if (messages.length == 0) { 
     // once there is no more message, do whatever you want 
     alert("redirecting"); 
    } else { 
     // change content of message, fade in, wait, fade out and continue with next message 
     $('#message').html(messages.pop()).fadeIn(500).delay(1000).fadeOut(500, nextMsg); 
    } 
}; 
// list of messages to display 
var messages = [ 
    "Hello!", 
    "This is a website!", 
    "You are now going to be redirected.", 
    "Are you ready?", 
    "You're now being redirected..." 
].reverse(); 

// initially hide the message 
$('#message').hide(); 

// start animation 
nextMsg();

帶着一點點修改，你應該能夠自定義的時間間隔，每信息。

來源

2011-12-25 18:18:15

這很好，雖然我怎麼可以隨機更改它顯示下一條消息的時間呢？我可以指定範圍嗎？ – Alex 2011-12-25 18:35:11

500中的.fadeIn（500）告訴jquery從淡入淡出500ms直到它完全可見。同樣，1000中的.delay（1000）和500中的.fadeOut（500，...）。你可以使用random（）函數來創建一個隨機數（例如隨機生成一系列數字的用法，請參閱http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript）。 – 2011-12-25 18:41:17

可以做到無限，我的意思是，隨機消息？ – 2013-11-27 13:52:56

使用setInterval和jQuery的附加組合。這將完成這項工作。附加你可以添加HTML內容在指定的標籤（與類或ID）。

來源

2011-12-25 17:56:26

你需要一些運動部件：

jQuery.fade()動畫文本（淡入/輸出）
setTimeout() - 推遲執行（「做到這一點，但在5秒內從現在「）
window.location = 'http://google.com';將用戶發送到另一個頁面。

來源

2011-12-25 17:57:46

最初用CSS隱藏所有元素。然後展示給他們。

您可以在Javacript中使用setTimeOut函數。您可以使用此設置何時調用'show'功能。你可以做的另一件事是在jquery中使用animate/show（動畫在你可以淡化顏色變化等方面有更多的靈活性）函數。您可以使用該回叫，以便將系列動畫功能鏈接在一起，例如

$(firstelement).animate({animateionstuff},5000,function(){$(secondelement).animate({animationstuff})});

或

$(firstelement).show(function(){$(secondelement).show(function(){do more stuff})});

在第二個例子，還可以設置持續時間。

更多的信息在這裏jQuery的文檔：http://api.jquery.com/category/effects/

來源

2011-12-25 17:57:49 matpol

如何在使用jQuery之後更改文本？

回答

相關問題