检查切换元素的可见性

Question

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

这里有一个实时演示 jsFiddle

如果你点击“Saved Data”，第一次它可以正确工作，但是下一次点击时文本不会改变。这本身就是我不理解的行为。

现在，我可以使用多个slideToggle()处理程序，然而，在代码的其他地方，我还设置了间隔，加载“Cookie data:”和“Server data:”旁边的数据。如果<div>不可见，我不希望这些间隔执行任何操作，因此我使用类似于以下内容：

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

我担心这些间隔不会正常工作，因为这个is(':visible')的问题。所以问题是，为什么会发生这种情况（else语句被忽略），我该怎么做才能减轻这种情况？

- Dreen

---

我只会做这个… - adeneo

说实话，我知道如何解决这个问题，只是想要一个解释为什么我的代码没有按预期工作，但还是谢谢你提供简短的版本 :) - Dreen

Answer 1

请查看更新的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');
            }

        });
    });
});​

- Vivin Paliath