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

Jquery script modification to add fade in/out features

本文关键字：淡出 功能 淡入 添加 脚本 修改 Jquery      更新时间：2023-09-26

好的，所以我从这个网站的另一个部分找到了这个脚本：

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";
    }
  }
}

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

为了让不同的元素淡入或淡出，需要对代码的哪一部分进行操作？

试试这样的东西：

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

500是衰落应该花费的毫秒数。以下是Jquery在JSFiddle上的一个工作示例。另一种可能性是使用show(500)和hide(500)。

更新：

根据OP的评论，这里有一个版本可以通过CSS转换（另一个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中分别设置它们。

一些不具描述性的用户好吧，我试过你的Jquery fiddle，这正是我想要的！谢谢你的耐心和时间。

相关文章：