检查切换元素的可见性

Question

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

这是关于jsFiddle的现场演示

如果单击"保存的数据",它第一次正常工作,但下次单击文本时不会更改.这本身就是我不理解的行为.

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

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

由于这项is(':visible')业务,我担心这些间隔不能正常工作.所以问题是,为什么会发生这种情况(否则会忽略语句),我该怎么做才能缓解这种情况呢？

Answer 1

看看更新的小提琴.当您在调用后立即检查可见性时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');
            }

        });
    });
});?