jQuery - 淡入淡出div

时间:2011-11-21 21:57:31

标签: jquery fadein fadeout

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

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

谢谢。

3 个答案:

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