第二次调用fadeIn()什么都不做

时间:2012-08-30 07:39:10

标签: jquery fadein fadeout

我想在两个内容之间切换。关于这一点的特殊之处在于元素必须逐渐淡出并淡入淡出。我的问题是第一个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;
});

1 个答案:

答案 0 :(得分: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。如果你在一个和两个上点击太快

,那就太麻烦了