jquery - 创建显示/隐藏连续循环所需的简单 jQuery 脚本

Question

我必须尽我所能研究这个论坛上的问题，但没有完全得到答案。
我是 jQuery 方面的新手。
我有这个 div

<div id="main">
    <div id="1" class="trip">Item1</div>
    <div id="2" class="trip">Item2</div>
    <div id="3" class="trip">Item3></div>
</div>

我想依次淡入每个div，然后隐藏并淡入下一个div。
我希望它在 div 中进行连续循环，直到访问者离开页面。
我需要一步一步的帮助来实现这一目标。
我是stackoverflow的新手，但我学得很快，所以请多多包涵:)

非常感谢任何帮助。
//Ot_Gu

Answer 1

创建一个函数并将其用作fadeOut的回调，当元素淡出时将调用该函数。

var $elem = $('#main .trip'), l = $elem.length, i = 0;

function comeOn() {
    $elem.eq(i % l).fadeIn(700, function() {
        $elem.eq(i % l).fadeOut(700, comeOn);
        i++;
    });
}

http://jsfiddle.net/MtmxN/

Answer 2

这是我的小提琴

function name_of_the_function() {
    $('.trip').each(function (index) { //for each element with class 'trip'
        $(this).delay(index * 1000).animate({ //delay 1000 ms which is the duration of the animation
            opacity: 1 //animate the opacity from 0 to 1
        }, {
            duration: 1000, //duration
            complete: function () { //when the animation is finished
                $(this).css({
                    opacity: 0 //turn the opacity from 1 to 0 without animation
                });
                if (index == 2) { //if the index == 2 which means we are in the last element in this case as we have 3 elements (0,1,2)
                    name_of_the_function(); //go back to the function
                }
            }
        });

    });
}

name_of_the_function(); //call the function at first

和我使用的CSS：

.trip {
    opacity:0;
    background:red;
    height:100px;
    width:100px;
}

Answer 3

以下是如何使用带有元素 ID 列表的递归来实现更灵活的解决方案。

var ids = ["#1","#2","#3"],
    time = 1000;


function cycleShowHide (i,ids,time) {
    if (i>=ids.length) {
        i = 0;
    }
    //hide previous
    if (i==0) {
        $(ids[ids.length-1]).hide(time);
    } else {
        $(ids[i-1]).hide(time);
    }
    //show next and repeat
    $(ids[i]).show(time, function(){
        i++;
        cycleShowHide(i);
    }
}

cycleShowHide(0,ids,time);

Answer 4

你可以使用 jquery 切换

<div id="main" style='display:none'>
     <div id="1" class="trip">Item1</div>
     <div id="2" class="trip">Item2</div>
     <div id="3" class="trip">Item3></div> 
</div>
<button id='mb'>Chick here</button>

写在脚本标签..

 $("#mb").click(function(){
     $('#main').toggle();
 });