2

我想在两个内容之间切换。特殊之处在于元素必须按顺序淡出和淡入。我的问题是第一个淡出/淡入有效，但是当我再次触发该过程时，什么也没有发生。要重现，依次单击顶部的三个链接，然后返回 Box1。

编辑：哦，是的，一个jsfiddle：http: //jsfiddle.net/UANvC/

代码片段：

<!DOCTYPE HTML>
<html>
    <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <link href="style.css" rel="stylesheet" />
            <script src="jquery-1.7.2.min.js" ></script>
    </head>


    <body>
            <a href="" id="start">start</a>
            <a href="" id="button1">one</a>
            <a href="" id="button2">two</a>

            <div id="boxes">
            <div id="box1" class="invisible"><p>box1</p></div>
            <div id="box2" class="invisible"><p>box2</p></div>
            </div>

            <div id="box11" class="box box1">box11</div>
            <div id="box12" class="box box1">box12</div>
            <div id="box13" class="box box1">box13</div>
            <div id="box14" class="box box1">box14</div>
            <div id="box15" class="box box1">box15</div>


            <div id="box21" class="box box2">box21</div>
            <div id="box22" class="box box2">box22</div>
            <div id="box23" class="box box2">box23</div>
            <div id="box24" class="box box2">box24</div>
            <div id="box25" class="box box2">box25</div>


            <script src="script.js" ></script>

    </body>
</html>

CSS：

.invisible {
    display: none;
}
#boxes {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
#boxes p {
    width: 300px;
    height: 300px;
}
.box {
    float:left;
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    display: none;
}

Javascript：

function showBox1() {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200, function() {
                $('#box1').fadeIn(200);
        });
    });
}
function showBox2() {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200, function() {
                $('#box2').fadeIn(200);
        });
    });
}
function hideBox1(callback) {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box1').delay(50*6).fadeOut(200).delay(50*7, function() {
            callback();
    });
}
function hideBox2(callback) {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box2').delay(50*6).fadeOut(200).delay(50*7, function() {
            callback();
    });
}

$('#start').on('click', function() {
    showBox1();
    return false;
});
$('#button1').on('click', function() {
    hideBox1(function() {
            showBox2();
    });
    return false;
});
$('#button2').on('click', function() {
    hideBox2(function() {
        showBox1();
    });
    return false;
});
4

1 回答 1

1

编辑

经过一些测试，我找到了解决它的方法，但我对此没有任何解释。我在 box1 或 box2 的每个动画之前调用 dequeue 函数。

如果您找到解释，我有兴趣阅读它。

代码版本 2

function showBox1() {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200)
    });
    $('#box1').dequeue();
    $('#box1').fadeIn(200);
}
function showBox2() {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200)
    });
    $('#box2').dequeue();
    $('#box2').fadeIn(200);
}
function hideBox1(callback) {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box1').dequeue();
    $('#box1').delay(50*6).fadeOut(200).delay(50*7, callback);
}
function hideBox2(callback) {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box2').dequeue();
    $('#box2').delay(50*6).fadeOut(200).delay(50*7, callback);
}



$('#start').click(function() {
    showBox1();
    return false;
});
$('#button1').click(function() {
    hideBox1(showBox2);
    return false;
});
$('#button2').click(function() {
    hideBox2(showBox1);
    return false;
});

Jsfiddle 示例在这里。如果您在一个和两个上单击太快，则会出现问题

于 2012-08-30T08:25:45.880 回答