检查切换元素的可见性答案

【问题标题】：Checking for visibility of a toggled element检查切换元素的可见性
【发布时间】：2012-09-18 15:30:21
【问题描述】：

我有一个按钮可以切换下方<div> 的可见性，并希望根据所述<div> 的可见性修改按钮上的文本。

这是jsFiddle上的现场演示

如果点击“保存的数据”，第一次可以正常工作，但下次点击文字不会改变。这本身就是我不理解的行为。

现在，我可以为slideToggle() 使用多个处理程序，然而，在代码的其他地方，我还在“Cookie 数据：”和“服务器数据：”旁边设置了加载数据的间隔。如果<div> 不可见，我不希望这些间隔做任何事情，所以我使用这样的东西：

    this.timer_cookiedata = setInterval(function(){
        if (!$savedData.is(':visible'))
        {
            return null;
        }
        // ..
    });

我担心这些时间间隔不会因为 is(':visible') 业务而正常工作。所以问题是，为什么会发生这种情况（else 语句被忽略），我能做些什么来缓解这种情况？

【问题讨论】：

我只会做THIS ...
好吧，我知道如何解决这个问题，我只是想解释为什么我的代码没有按预期工作，但感谢您提供的简短版本 :)

标签： javascript jquery toggle visibility

【解决方案1】：

查看updated fiddle。当您在调用slideToggle 后立即检查可见性时，jQuery 可能尚未更新元素的可见性，因为动画需要一些时间才能完成。正是出于这个原因，slideToggle 有一个回调，您可以在动画完成后使用它来执行操作：

$(function () {
    var $savedData = $('#savedData');
    $('#btn-savedData')
        .click(function () {
        var $button = jQuery(this);

        //I'm checking the visibility in the callback. Inside the callback, 
        //I can be sure that the animation has completed and the visibility 
        //has been updated.
        $savedData.slideToggle('fast', function () {
            if ($savedData.is(':visible')) {
                $button.html('visible');
            } else {
                $button.html('not visible');
            }

        });
    });
});

【讨论】：