检查切换元素的可见性

我有一个按钮，用于切换其下方的<div>的可见性，并且希望根据所述<div>的可见性修改按钮上的文本。检查切换元素的可见性

现场演示如果你点击“保存数据”，第一次它工作正常，但下一次你单击该文本不会更改。这本身就是我不明白的行为。现在

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

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

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

来源

2012-09-26 Dreen

我只想做[这]（http://jsfiddle.net/QgjJG/5/）.. 。 – adeneo

好吧tbh我知道如何解决这个问题，我只是在寻找解释为什么我的代码不能按预期工作，但是感谢短版本:) – Dreen

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

     }); 
    }); 
});

来源

2012-09-26 22:24:29

对我来说很好看 –

检查切换元素的可见性

回答

相关问题