Question

我想在两个内容之间切换。关于这一点的特殊之处在于元素必须逐渐淡出并淡入淡出。我的问题是第一个fadeOut / fadeIn工作，但是当我再次触发进程时，没有任何反应。要重现，请依次单击顶部的三个链接，然后返回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;
});

Answer 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示例here。如果你在一个和两个上点击太快
，那就太麻烦了

第二次调用fadeIn（）什么都不做

1 个答案: