淡入/淡出jQuery列表 [英] Fading in/out a jquery list

查看:70
本文介绍了淡入/淡出jQuery列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试编写一个jquery函数,该函数遍历无序列表(具有id"intro"的ul元素),并分别淡入和淡出每个元素.这是行不通的,但是在开发人员工具中我没有收到任何错误.我还尝试将var list = $("#intro");更改为var list = $("#intro li");,但也没有与此相关的骰子

I'm trying to write a jquery function that loops through an unordered list (the ul element having the id "intro") and individually fades in and fades out each element. This doesn't work, but I get no errors in the developer tools. I also tried changing var list = $("#intro"); to var list = $("#intro li"); but no dice with that either

<script type = "text/javascript">
        function startAnimations(){

            var list = $("#intro");
            list.hide();
            list.each(function(li) {
                $(li).fadeIn(3000, function(){
                    $(li).fadeOut(3000);
                });

            });
        }
    </script>

由于要求提供html:

Since the html was asked for:

<body onload="startAnimations()">
    <div class = "container">
        <div id = "inner">  </div>
        <div id = "right-col">
            <ul id = "intro">
                <li id = "greeting"> <h2 > sometext </h2> </li>
                <li id = "sidenote"> <h6 >  sometext </h6> </li>
                <li id = "sentence"> <h3 >  sometext </h3> </li>
                <li id = "sentence"> <h3 >  sometext</h3> </li>
                <li id = "sentence"> <h3 >  sometext</h3> </li>
            </ul>
        </div>
    </div>

</body>

推荐答案

尝试

function startAnimations() {
    $("#intro li").hide();

    function loop() {
        var $li = $("#intro li:first-child").fadeIn(3000, function () {
            $li.fadeOut(3000, function () {
                $li.appendTo('#intro');;
                loop()
            })
        });
    }
    loop()
}

演示:小提琴

这篇关于淡入/淡出jQuery列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆