Question

我有一些类“c01，c02，c03”的Div。当我点击换行时，首先显示c01，然后显示c02，然后显示最后一个c03。但是当我再次点击换行时，我想先隐藏c3，然后隐藏c2，最后隐藏c1。

提前致谢。

var wrap = $('#wrap'),
    c01 = $('#c01'),
    c02 = $('#c02'),
    c03 = $('#c03');

wrap.click(function () {
    setTimeout(function () {
        c01.toggleClass('c01');
    }, 0);
    setTimeout(function () {
        c02.toggleClass('c02');
    }, 200);
    setTimeout(function () {
        c03.toggleClass('c03');
    }, 400);
});

您可以在http://jsfiddle.net/tZyMY/

中看到

Answer 1

这不是最好的答案，但希望有效：

 wrap.click(function () {
        var time = '';

        if(c01.hasClass('c01')){
            var time = 400;
        }else{
            var time = 0;    
        }

        setTimeout(function () {
            c01.toggleClass('c01');
        }, time);

        setTimeout(function () {
            c02.toggleClass('c02');
        }, 200);

        if(c03.hasClass('c03')){
            var time = 0;
        }else{
            var time = 400;    
        }
        setTimeout(function () {
            c03.toggleClass('c03');
        }, time);
    });

Answer 2

看看这个http://jsfiddle.net/DNzQy/2/

var wrap = $('#wrap'),
    c01 = $('#c01'),
    c02 = $('#c02'),
    c03 = $('#c03');

var toggle = 1;

wrap.click(function () {
    if (toggle == 1) {
        toggleC01 = 400;
        toggleC02 = 200;
        toggleC03 = 0;
        toggle = 0;
    } else {
        toggleC01 = 0;
        toggleC02 = 200;
        toggleC03 = 400;
        toggle = 1;
    }
    setTimeout(function () {
        c01.toggleClass('c01');
    }, toggleC01);
    setTimeout(function () {
        c02.toggleClass('c02');
    }, toggleC02);
    setTimeout(function () {
        c03.toggleClass('c03');
    }, toggleC03);

});

Answer 3

请注意，您可以添加任意数量的子项：

var children = $('#wrap div'),
    dir = 1;
$('#wrap').one('click', function click() {
    var idx;
    switch (dir) {
        case 1: idx = 0; break;
        case -1: idx = children.length - 1; break;
    }
    setTimeout(function fn() {
        children.eq(idx).toggle();
        idx += dir;
        if (idx > -1 && idx < children.length) {
            setTimeout(fn, idx * 200);
        } else {
            dir = -dir;
            $('#wrap').one('click', click);
        }
    }, idx * 200);
});

请参阅演示：http://jsfiddle.net/wared/YrUWs/。

Answer 4

我猜这个更接近你的要求：

var children = $('#wrap div'),
    dir = -1,
    idx = -1, 
    tid;
$('#wrap').click(function () {
    tid && clearTimeout(tid);
    dir = -dir;
    idx += dir;
    (function fn() {
        children.eq(idx).toggle(dir > 0);
        idx += dir;
        if (idx > -1 && idx < children.length) {
            tid = setTimeout(fn, 100);
        }
    })();
});

同样，您可以添加任意数量的DIV。请参阅演示：http://jsfiddle.net/wared/6AJzP/。

Answer 5

使用全局变量可以很容易地实现这一点。当var showClass = True显示它们时，当它是false时，用另一种方式。在函数中，在显示或隐藏后翻转变量。

第二次单击更改功能

5 个答案: