Question

我有以下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的速度可以不同吗？

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

谢谢。

Answer 1

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

Answer 2

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，它们可以在相同的代码中轻松“插入”，唯一的区别就是授予悬停。

好运动！

Answer 3

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

首先将一个类“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();
});

jQuery - 淡入淡出div

3 个答案: