将 jQuery 嵌套在 Javascript 函数中以从显示中淡入 Div：无答案

【问题标题】：Nest jQuery Inside Javascript Function To Fade In Div From Display:None将 jQuery 嵌套在 Javascript 函数中以从显示中淡入 Div：无
【发布时间】：2014-12-18 21:38:52
【问题描述】：

我有一个基于 ID 显示 div 的解决方案，但我希望它淡入。

由于页面的复杂性以及它位于 WordPress 内部的事实，我想修改这个 DOM 函数以包含一个 .show("slow") 以使淡入淡出工作与重新设计整个页面。

代码如下：

CSS 块

<style>
.biobox { display:none;}
</style>

我想将 jQuery 插入到 FadeIn 中的 JavaScript var divs = [“一个”，“两个”]； var visibleDivId = null;

function toggleVisibility(divId) {
    if(visibleDivId === divId) {
        visibleDivId = null;
    } else {
        visibleDivId = divId;
    }

    hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
var i, divId, div;

for(i = 0; i < divs.length; i++) {
    divId = divs[i];
    div = document.getElementById(divId);

    if(visibleDivId === divId) {

        div.style.display = "block"; 
        //the above line I want to swap with a jquery instance that includes .show("slow"), such as this code that does not work for me $(document).ready(function(){ $(div).show("slow"); });

    } else {
        div.style.display = "none";
    }
  }
}
</script>

默认隐藏的DIV

<div class="biobox" id="one">
<img src="http://deliveringhappiness.com/wp-content/uploads/2013/08/thought-leadership1.jpg" width="346" height="346" border="0" />
</div>
<div class="biobox" id="two">
<img src="http://www.traianbadulescu.ro/wp-content/uploads/2012/10/leaders.jpg" width="402" height="317" />
</div>

切换 biobox 的 DIV 可见性的代码

    <a href="#" onclick="toggleVisibility('one');">Close</a>
    <a href="#" onclick="toggleVisibility('two');">Close</a>

那么为什么$(document).ready(function(){ $(div).show("slow"); }); 不能代替div.style.display = "block";？顺便说一句，我在此代码之前将 jQuery 插入到页面中。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

您将需要一种不同的方式来隐藏您不可见的div，因为您不能从display: none 淡出到另一个显示值，无论是块、内联还是内联块。

您可以转换不透明度或结合不透明度、z-index 或左/右离屏隐藏来做一些事情。

【讨论】：

是的，我知道我可以通过两个类来做到这一点，一个使用 display:none，另一个使用不透明度并使用 jQuery 的淡入命令，但是我发现的代码都是用 jQuery 和我不确定如何将它与这个非 jQuery 代码集成，但我会在明天发布。感谢您确认您不能从 display:none 中淡出。这关闭了许多可能的解决方案。
你的 jQuery 做这样的事情可以像 element.toggleClass('showing'); 一样简单，其余的你可以（或应该）在 CSS 中做。