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>

我现在想要的是，当悬停在“快速事实”上时，淡入“文本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);

$.fn.rollingText=函数（数字、时间）{
对于（变量i=0；i

前两个的问题是，所有文本都会像其他跨度元素一样在悬停时同时出现，然后在鼠标悬停时消失

最后一个问题是，所有div都在一次淡入淡出（但至少它们会淡入淡出），这是我能改变的最接近的一个问题？另外，如何使fadeIn循环，而不是在本例中停止在8？fadeIn和fadeOut的速度会不同吗

也许这不是最好的解决方案，如果有人能就我的前两次尝试和哪里出错提供建议，我也会很感激

---

谢谢。

好的，我整理了一段可能有用的代码片段

首先将类“hoverme”添加到包含跨距的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>

在JSFIDLE上试用：

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();
});

编辑（完善代码）

哦，去派对晚了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>

li{列表样式：无；}
li div{clear:两者；float:左侧；文本对齐：左侧；display:块；宽度：400px；}
LIA{float:left；文本对齐：left；宽度：150px；}
li span{float:左；文本对齐：左；显示：无；}
jQuery（函数（）{
$（'.nav'）。在（{
鼠标指针：函数（）{
var$this=$（this）；
$this.addClass（'mouseIN'）；
if（$this.hasClass（'mouseOUT'））$this.removeClass（'mouseOUT'）；
setTimeout（函数（）{
if（$this.hasClass（'mouseIN'））{
var iCount=$this.find（'span'）.length；
功能展示项目（一）{
if（$this.hasClass（'mouseIN'））{
$this.find（'span:eq（'+i+'））.slideDown（500）、delay（1000）、slideUp（1000）；
if（（i 1））设置超时（函数（）{
i++；
i=（i1）
showItem（0）
else$this.find（'span:eq（0）'）。向下滑动（500）；
}
},200);
},
mouseleave:function（）{
var$this=$（this）；
$this.addClass（'mouseOUT'）；
if（$this.hasClass（'mouseIN'））$this.removeClass（'mouseIN'）；
setTimeout（函数（）{
if（$this.hasClass（'mouseOUT'））{
$this.find（'span'）.slideUp（1000）；
}
},200);
}
})//li.nav
});


我们是谁


文本1
文本2
文本3


我们的博客


联系

样本：

我不知道如何重新发明轮子。我不惜任何代价避免使用插件，或者将其作为学习如何解决问题的一种方式

40000多年前，“我们”能够建造金字塔。今天，有了所有可用的技术（插件），我们甚至无法模仿一个。再过40000年怎么样？40tb程序将显示“欢迎”

我知道这不是一个论坛，所以他们是非常正确的。有三种以上的悬停方式：

盘旋

鼠标盖/鼠标出

鼠标器/鼠标器

他们都有自己的小毛病。多亏了jQuery，它们可以很容易地“插入”到相同的代码中，唯一的区别就是悬停

---

很好的锻炼

好的，对你的尝试发表评论。第一次和第二次尝试，你永远不会淡出任何元素。第三次尝试调用fadeIn和fadeOut chained，后者不会等待第一次调用完成，而是使用回调方法，例如，请参见下面的答案。它很有效，非常感谢您提供的所有详细信息。我武断地选择了另一个答案，因为两者都有效。再次感谢你的帮助！很高兴这有帮助。与其随意选择，不如考虑：1。这一答复提前一小时提交。这个答案有更多的选票。事实上，我想我在几分钟前看到了马丁·拉尔森的答案，这就是为什么我选择了它，但我可能错了。我还是给了你一票，因为你的答案也很准确：）@zequinha bsbAgree，我也试着远离插件。你的例子做得很好，谢谢。

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();
});

<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>