我有一个根据 ID 显示 div 的解决方案,但我希望它淡入。
由于页面的复杂性以及它位于 WordPress 内部的事实,我想修改此 DOM 函数以包含一个 .show("slow") 以使淡入淡出与重新设计整个页面相比。
代码如下:
CSS block
<style>
.biobox { display:none;}
</style>
我想将 jQuery 插入到淡入中的 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 插入到页面上。
最佳答案
你需要一种不同的方式来隐藏你不可见的 div
因为你不能从 display: none
淡化到另一个显示值,无论是 block ,内联或内联 block 。
您可以转换不透明度或结合不透明度、z-index 或左/右屏幕外隐藏来做一些事情。
关于javascript - 在 Javascript 函数中嵌套 jQuery 以从显示 :None 淡入 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27556179/