У меня есть следующий HTML:
<ul>
<li id="about"><a href="#about" class="goto_about">About us<span>who we are</span></a></li>
<li id="quickfacts">
<a href="#">Quick facts
<span class="quickfacts">text 1</span>
<span class="quickfacts">text 2</span>
<span class="quickfacts">text 3</span>
</a>
</li>
<li id="blog"><a href="#blog" class="goto_blog">Blog<span>our blog</span></a></li>
<li id="contact"><a href="#contact" class="goto_contact">Contact<span>get in touch</span></a></li>
</ul>
И CSS для отображения элементов span при наведении:
li a span {
visibility: hidden;
}
li a:hover span {
visibility: visible;
}
Теперь я хочу, чтобы при наведении указателя «Быстрые факты» на «Текст 1»; через пару секунд он исчезает, затем появляется текст 2 и т. д. (в той же позиции).
Я пробовал эти предложения из других сообщений:
Первая попытка
jQuery.fn.fadeDelay = function() {
delay = 0;
return this.each(function() {
$(this).delay(delay).fadeIn(350);
delay += 50;
});
});
$(".quickfacts").fadeDelay();
Вторая попытка
$(".quickfacts").hide().each(function(i) {
$(this).delay(i*5000).fadeIn(5000);
});
Третья попытка
$.fn.rollingText = function(number, time){
for(var i = 0; i < number; i++){
this.fadeIn(time).fadeOut(time);
if(i != number - 1) this.delay(time);
}
return this;
}
$(".quickfacts").rollingText(8, 2000);
Проблема первых двух заключается в том, что все тексты появляются при наведении, как и остальные элементы span, и исчезают при наведении мыши.
Проблема с последним, который мне ближе всего подходит, чтобы заставить его работать, состоит в том, что все div'ы исчезают одновременно (но, по крайней мере, они появляются и исчезают), как я могу это изменить? Кроме того, как я могу сделать FadeIn циклическим, в отличие от остановки в этом случае в 8? и могут ли скорости fadeIn и fadeOut быть разными?
Возможно, это не лучшее решение, я также буду признателен, если кто-нибудь посоветует мои первые две попытки и где я ошибся.
Спасибо.