javascript - Jquery脚本修改以添加淡入/淡出功能

Question

好的，我从这个网站的不同部分找到了这个脚本:

var divs = ["wrap20", "wrap21", "wrap22"];
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";
    } else {
      div.style.display = "none";
    }
  }
}

我能够成功地将这段代码实现到一个网站，每当我单击独立的超链接时，该网站就会显示各种图片组。

需要操作此代码的哪一部分才能使不同元素淡入或淡出？

Answer 1

尝试这样的事情:

if(visibleDivId === divId) {
    $(div).fadeIn(500);
} else {
    $(div).fadeOut(500);
}

500 是淡入淡出所需的毫秒数。这是working example with Jquery在 JSFiddle 上。另一种可能性是使用 show(500) 和 hide(500)。

<小时/>

更新:

根据 OP 的评论，这里有一个通过 CSS 过渡实现这种效果的版本 (another Fiddle) :

HTML

<a href="#" id="a1" onclick="toggleVisibility('wrap20')">Click1</a>
<a href="#" id="a2" onclick="toggleVisibility('wrap21')">Click2</a>
<a href="#" id="a3" onclick="toggleVisibility('wrap22')">Click3</a>
<div>
    <div class="wraps on" id="wrap20">
      Image #1
    </div>
    <div class="wraps off" id="wrap21">
      Image #2
    </div>
    <div class="wraps off" id="wrap22">
      Image #3
    </div>
</div>

Javascript

var divs = ["wrap20", "wrap21", "wrap22"];
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.className = "wraps on";
    } else {
        div.className = "wraps off";
    }
  }
}

CSS

.wraps {
  width:100px;
  height:100px;
  display: block;
  position: absolute;
  top: 60px;
  left: 10px;
}
.on {
  opacity: 1;
  transition: opacity 2s;
  z-index: 999;
}
.off {
  opacity: 0;
  transition: opacity 2s;
  z-index: 100;
}
#wrap20 {
  background-color:green;
}
#wrap21 {
  background-color:blue;
}
#wrap22 {
  background-color:red;
}

这里不需要 display 属性，无论如何它都不适合转换。您只需按照您想要的方式显示所有 div，并使用 opacity 属性来隐藏和显示它们。 opacity 与过渡效果很好。两种状态的 Transition 和 opacity 汇总在类中，因此您不必在 JavaScript 中单独设置它们。