Question

我在我的代码上挂了很多东西，但经过几个小时的工作后纠正了，并对差异感到惊讶。

为什么我的第一个代码只在第一次使用时才起作用，而不是在第一次点击之后，但第二次代码效果很好？

$('button').click(function(){
    $('.f').fadeToggle(400);
    if($('.one').is(':visible')){
        $('.apps').text("one apps");
    }
    if($('.two').is(':visible')){
        $('.apps').text("two apps");
    }
});

by using complete function：

$('button').click(function(){
    $('.f').fadeToggle(400,function(){

        if($('.one').is(':visible')){
            $('.apps').text("one apps");
        }
        if($('.two').is(':visible')){
            $('.apps').text("two apps");
        }

    });

});

任何人都可以给我正确的描述，为什么它不能使用第一个代码？

Answer 1

.fadeToggle的文档告诉我们这个函数接受三个参数：

.fadeToggle( [duration ] [, easing ] [, complete ] )

或一个参数：

.fadeToggle( options )

您正在使用第一个表单。其中最后一个参数是

动画完成后调用的函数。

所以在动画在函数内完成之后，你必须包装你想要做的所有事情。这就是你在第二个代码示例中所做的。

动画完成后，您的第一个代码示例未执行任何 。调用fadeToggle后的代码立即执行。这可能不是你想要的。

Answer 2

我添加了超时以显示主要问题。在这里你干扰fadeToggle：事实上，在400ms切换时间内，你的div不会被隐藏：它们都是可见的！

您可以在此示例中看到它：

在HTML中我添加了一个div来显示可见状态：

<div style="height: 25px; overflow:hidden;">
<div class="one f">one</div>
<div class="two f">two</div>
</div>
<div class="apps"></div>
<button>click me</button>

<div id="checkVisible"></div>

在javascript中，我使用setTimeout来检查转换期间的事情（这里的值为300），但也检查之后（例如值为500），你会得到差异。

$('button').click(function(){
    $('.f').fadeToggle(400);

    setTimeout(function() {
        var oneVisible = $('.one').is(':visible');
        var twoVisible = $('.two').is(':visible');
        $("#checkVisible").text(oneVisible + " / " + twoVisible);

        if(oneVisible){
            $('.apps').text("one apps");
        }
        if($('.two').is(':visible')) {
            $('.apps').text("two apps");
        }
    }, 300);

});

http://jsfiddle.net/nrobert/3e9Y6/6/

使用300，您将有两个项目“可见”，这就是您的代码无效的原因。
使用500时，您将看到1个可见，1个不可见，就像使用“完整”

您应该在切换完成时更新文本更新，或者使用其他检查，在此转换期间无法使用可见文字。

差异与使用和不使用完整的回调函数

2 个答案: