javascript - 检查切换元素的可见性

Question

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

这是关于 jsFiddle 的现场演示

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

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

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

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

Answer 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');
            }

        });
    });
});​