jQuery - 检查元素是否可见并淡入

Question

我在网页上有一个

元素（假设它有.myelement类）。我有一个第三方脚本来操作这个元素，并且可以更改它的可见性样式属性为“visibility: visible”。

我需要检查.myelement的可见性是否为:visible，如果是，则触发jQuery .fadeIn()函数。

- Albert

Answer 1

我理解你的意思是检查元素是否可见，如果不可见，则淡入。没有必要将已经在页面上可见的元素淡入。如果是这种情况，你应该这样做：

var $element = $('.myelement');

if (!$element.is(':visible')) {
    $element.fadeIn();
}

或者

if ($element.is(':hidden')) {
    // your logic goes here
}

- kidA

Answer 2

尝试使用.css("property")函数提取属于visible属性的样式值，然后进行普通比较，如果条件评估为真，则调用fadeIn。

var elem = $(".myelement");
if(elem.css("visibility") === "visible"){
  elem.fadeIn();
}

- Rajaprabhu Aravindasamy

---

我一开始以为fadeToggle有一个开关参数，但实际上没有。所以我撤回了我的答案。 - Rajaprabhu Aravindasamy

Answer 3

你可以使用 jQuery 的 CSS 函数

//first cache your element 
var elm = $(".myelement");//better to use an id if you are targeting a specific element 

 if (elm.css("visibility") === "visible"){
  elm.fadeIn();
 }else{
   elm.fadeOut();
 }

- Remon Amin

Answer 4

在开始fadeIn动画之前，我认为您必须将元素设置为display:none，这样fadeIn函数才能使您的div缓慢出现。 在jquery中，您可以使用hide()来实现。

尝试这个片段，对我有效。

jQuery(document).ready(function(){
   var $myel = $(".myelement");  
   if ($myel.css("visibility") === "visible"){
     $myel.hide();
     $myel.fadeIn("slow");
   }
});

- cesare