我有以下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>
用于在悬停时显示span元素的CSS:
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元素一样,并在mouseout上消失。
最后一个问题,即我最接近它的问题是,所有div都会立即消失(但至少它们会淡入淡出),我该如何改变呢?另外,如何使fadeIn循环,而不是在这种情况下停在8?并且fadeIn和fadeOut的速度可以不同吗?
也许这不是最好的解决方案,如果有人可以就我的前两次尝试提出建议以及我哪里出错,我也会感激。
谢谢。
答案 0 :(得分:2)
在JSFiddle上试一试: 的 http://jsfiddle.net/missaghi/FZm3B/10/ 强>
CSS
li a span {
display:none;
}
脚本
function rotate(anchor) {
if ($(anchor).attr("looper") === "true") {
var nextone = $(anchor).find("span:visible").next();
nextone.hide();
if ($(anchor).find("span:visible").index() == ($(anchor).find("span").length - 1)) {
nextone = $(anchor).find("span:first");
}
if ($(anchor).find("span").length > 1) //dont- loop singles
{
$(anchor).find("span:visible").fadeOut(400, function() {
$(this).hide();
nextone.hide().fadeIn(400);
});
}
if ($(anchor).find("span:visible").length == 0) {
$(anchor).find("span:first").hide().fadeIn(400);
}
setTimeout(function() {
rotate(anchor);
}, 1000);
}
}
$("li").hover(function() {
$(this).attr("looper", "true");
rotate(this);
}, function() {
$(this).attr("looper", "false");
$(this).find("span").hide();
});
答案 1 :(得分:1)
EDITED(改进代码)
好吧,派对晚了5个小时。这是我的2c练习:
<style type='text/css' media='screen'>
li { list-style: none; }
li div { clear:both; float:left; text-align:left; display:block; width:400px; }
li a { float:left; text-align:left; width:150px; }
li span { float:left; text-align:left; display:none; }
</style>
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>
jQuery( function () {
$('.nav').on( {
mouseenter : function () {
var $this = $(this);
$this.addClass('mouseIN');
if ($this.hasClass('mouseOUT')) $this.removeClass('mouseOUT');
setTimeout( function () {
if ($this.hasClass('mouseIN')) {
var iCount = $this.find('span').length;
function showItem(i) {
if ($this.hasClass('mouseIN')) {
$this.find('span:eq('+i+')').slideDown(500).delay(1000).slideUp(1000);
if ((i<iCount) && (iCount > 1)) setTimeout( function () {
i++;
i = (i < iCount) ? i : 0;
showItem(i);
},2501);
}
};
if (iCount > 1)
showItem(0)
else $this.find('span:eq(0)').slideDown(500);
}
},200);
},
mouseleave: function () {
var $this = $(this);
$this.addClass('mouseOUT');
if ($this.hasClass('mouseIN')) $this.removeClass('mouseIN');
setTimeout( function () {
if ($this.hasClass('mouseOUT')) {
$this.find('span').slideUp(1000);
}
},200);
}
}); //li .nav
});
</script>
</head>
<body>
<ul>
<li id="about" class='nav' >
<div>
<a href="#about" class="goto_about">About us</a>
<span>who we are</span>
</div>
</li>
<li id="quickfacts" class='nav' >
<div>
<a href="#">Quick facts</a>
<span>text 1</span>
<span>text 2</span>
<span>text 3</span>
</div>
</li>
<li id="blog" class='nav' >
<div>
<a href="#blog" class="goto_blog">Blog</a>
<span>our blog</span>
</div>
</li>
<li id="contact" class='nav' >
<div>
<a href="#contact" class="goto_contact">Contact</a>
<span>get in touch</span>
</div>
</li>
</ul>
</body>
示例:http://zequinha-bsb.int-domains.com/menuing.html
我不知道重新发明轮子。我不惜任何代价避免使用插件,或者将它们用作学习如何解决问题的方法。
40,000多年前,“我们”能够建造金字塔。今天,有了所有可用的技术(插件),我们甚至无法模仿一个。从现在起又过了4万年呢? 40tb程序显示“欢迎”?我知道这不是一个论坛,所以强制执行,他们是非常正确的。有三种方法可以进行悬停:
悬停
鼠标悬停/鼠标移开
的mouseenter /鼠标离开
他们都有自己的小错误。感谢jQuery,它们可以在相同的代码中轻松“插入”,唯一的区别就是授予悬停。
好运动!
答案 2 :(得分:0)
好的,我整理了一个可能有用的代码段。
首先将一个类“hoverme”添加到包含spans的a
<a class="hoverme" href="#">Quick facts
<span class="quickfacts">text 1</span>
<span class="quickfacts">text 2</span>
<span class="quickfacts">text 3</span>
</a>
CSS
.quickfacts {display:none; }
javascript,小提琴http://jsfiddle.net/JBzNm/1/
var isFadeable = false;
var position = 0;
var quickfacts = $(".quickfacts");
var qlength = quickfacts.length;
function fadeMe() {
if (!isFadeable) {
return;
}
var element = quickfacts.get(position); //get element to fade in
$(element).fadeIn(function() {
$(element).delay(2000).fadeOut(function() {
position++; //move position to get next element
if (position == qlength) {
position = 0; //start over
}
fadeMe();
});
});
}
//bind mouse events
$(".hoverme").mouseover(function(e) {
isFadeable = true;
fadeMe();
});
$(".hoverme").mouseout(function(e) {
isFadeable = false;
quickfacts.fadeOut();
});