Как изменить текст после времени с помощью 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

500 in. FadeIn (500) сообщает jquery о постепенном исчезновении на 500 мс с начала исчезновения, пока он не будет полностью виден. Аналогично 1000 в .delay (1000) и 500 в .fadeOut (500, ...). Вы можете использовать функцию random() для создания случайного числа (например, использование случайных чисел для создания диапазона чисел, см. Http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript). –

может сделать это бесконечно, я имею в виду случайное сообщение? –

использование комбинация комплектInterval и jquery добавление. Это сделает работу. с добавлением вы можете добавить html-содержимое в указанный тег (с классом или id).

источник

2011-12-25 17:56:26

Вам нужно несколько движущихся частей:

jQuery.fade() анимировать текст (выцветанию в/из)
setTimeout() - отложить исполнение ("это сделать, но в 5 секунд от now ")
window.location = 'http://google.com';, чтобы отправить пользователя на другую страницу.

источник

2011-12-25 17:57:46

Первоначально скрыть все элементы с помощью CSS. Затем покажите их.

Вы можете использовать функцию setTimeOut в Javacript. Вы можете установить, когда вызываются функции 'show', используя это. Другая вещь, которую вы можете сделать, это использовать анимацию/показ (анимация имеет немного большую гибкость в том, что вы можете сделать, изменяет изменения цвета и т. Д.) В jquery. Это имеет обратный вызов, который вы можете использовать, чтобы объединить функции анимации серии вместе, например.

$(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/

источник

2011-12-25 17:57:49 matpol

Как изменить текст после времени с помощью jQuery?

ответ

Смежные вопросы