jQuery - 一个又一个的div淡入淡出
我有以下 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);
前两个的问题是所有文本在悬停时立即出现,就像其余的跨度元素一样,并在鼠标移开时消失。
最后一个的问题是我最接近的让它工作,所有的 div 都同时淡入(但至少它们淡入和淡出),我该如何改变这个?另外,我怎样才能使淡入循环,而不是在这种情况下停止在 8 处?淡入和淡出速度可以不同吗?
也许这不是最好的解决方案,如果有人可以对我的前两次尝试以及我哪里出错了提出建议,我也将不胜感激。
谢谢。
I have the following 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>
And CSS to display the span elements on hover:
li a span {
visibility: hidden;
}
li a:hover span {
visibility: visible;
}
What I want now is, when hovering over 'Quick facts' to fade in 'text 1'; after a couple of seconds fade it out and fade in 'text 2' and so on (in the same position).
I've tried these suggestions from other posts:
First try
jQuery.fn.fadeDelay = function() {
delay = 0;
return this.each(function() {
$(this).delay(delay).fadeIn(350);
delay += 50;
});
});
$(".quickfacts").fadeDelay();
Second try
$(".quickfacts").hide().each(function(i) {
$(this).delay(i*5000).fadeIn(5000);
});
Third try
$.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);
The issue with the first two is all texts appear at once on hover, like the rest of the span elements, and disappear on mouseout.
The problem with the last one, which is the closest I've come to make it work, is all divs are fading in at once (but at least they fade in and out), how can I change this? Also, how can I make the fadeIn cyclic, as opposed to stopping at 8 in this case? and can the fadeIn and fadeOut speeds be different?
Perhaps this is not the best solution, I'd also appreciate if someone can advise on my first two tries and where did I go wrong.
Thank you.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在 JSFiddle 上尝试一下:
http://jsfiddle.net/missaghi/FZm3B/10/
CSS
脚本
Try it out on JSFiddle:
http://jsfiddle.net/missaghi/FZm3B/10/
The CSS
The script
编辑(改进了代码)
好吧,聚会晚了 5 个小时。这是我的 2c 作为练习:
示例: http://zequinha-bsb.int-domains .com/menuing.html
我不知道如何重新发明轮子。我不惜一切代价避免使用插件,或者使用它们作为学习如何解决问题的一种方式。
4万多年前,“我们”能够建造金字塔。如今,有了所有可用的技术(插件),我们甚至无法模仿其中之一。从现在起再过四万年怎么样? 40tb 程序显示“欢迎”?
我知道这不是一个论坛,因此必须强制执行,他们是非常正确的。悬停的方式有三种以上:
hover
mouseover/mouseout
mouseenter/mouseleave
它们都有自己的小缺点。感谢 jQuery,它们可以轻松地“插入”到相同的代码中,唯一的区别是悬停。
不错的锻炼!
EDITED (refined the code)
Well, 5 hours too late to the party. Here are my 2c as an exercise:
Sample: http://zequinha-bsb.int-domains.com/menuing.html
I don't know about reinventing the wheel. I avoid plug-ins at any cost or use them as a way of getting to learn how to solve the problem.
40,000+ years ago, "we" were able to build pyramids. Today, with all the technology available (plug-ins), we cannot even mimic one. How about another 40,000 years from now? 40tb program to display "Welcome"?
I understand that this is not a forum and SO enforce that and they are very right. There are three+ ways of doing the hovering:
hover
mouseover/mouseout
mouseenter/mouseleave
They all have their own little faults. Thanks to jQuery, they can be "plugged-in" easily in the same code with the only difference being awarded to hover.
Nice exercise!
好的,我整理了一个可能有效的代码片段。
a中
首先将一个类“hoverme”添加到包含spans css的
。 }
javascript, 小提琴 http://jsfiddle.net/JBzNm/1/
Ok, I put together a code snippet that might work.
first add a class "hoverme" to the a that contains spans
css
.quickfacts { display:none; }
javascript, fiddle http://jsfiddle.net/JBzNm/1/