將jQuery內部的Javascript函數嵌套到顯示的淡入淡出中：無

Question

我有一個基於ID來顯示div的解決方案，但我希望它逐漸消失。

由於頁面的復雜性以及它在WordPress內部的事實，我想修改此DOM函數以包括.show（“ slow”）來淡化工作，而不是重新設計整個頁面。

這是代碼：

CSS塊

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

我想將jQuery插入FadeIn的JavaScript var divs = [“ one”，“ two”]; 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插入此代碼之前的頁面上。

Answer 1

您將需要一種隱藏不可見div的不同方法，因為您無法從display: none淡出display: none到另一個顯示值，無論是塊，內聯還是內聯塊。

您可以轉換不透明度，或與不透明度，z-index或左/右屏幕外隱藏結合使用。