Question

我之前从未使用过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），我不知道脚本/功能在哪里。有人可以告诉我如何，或链接到向我展示的初学者指南吗？

Answer 1

这是一种方法（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();

稍加修改后，您应该可以自定义每条消息的间隔。

Answer 2

你需要几个活动部件：

jQuery.fade()为您的文字制作动画（淡入/淡出）
setTimeout() - 延迟执行（“执行此操作，但从现在起5秒内”）
window.location = 'http://google.com';将用户发送到另一个页面。

Answer 3

最初使用CSS隐藏所有元素。然后告诉他们。

您可以在Javacript中使用setTimeOut函数。您可以设置何时使用此方法调用“show”函数。您可以做的另一件事是在jquery中使用animate / show（animate在弹出颜色变化等方面有更多的灵活性）功能。这有一个你可以使用的回调，所以你可以链接系列动画功能，例如。

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

或

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

在第二个例子中，您还可以设置持续时间。

jquery docs中的更多信息：http://api.jquery.com/category/effects/

Answer 4

使用setInterval和jquery append的组合。那将完成工作。使用append，您可以在指定的标记中添加html内容（带有类或ID）。

如何使用jQuery一次又一次地更改文本？

4 个答案: