javascript - 尝试在 Javascript 中编写 jQuery fadeTo 效果

Question

一个网站只使用一个 jQuery 函数，我们想用一个同等的纯 Javascript 函数替换它。但是我很难转换(翻译)那个功能。我知道 jQuery 非常适合该任务，但为几行 Javascript 下载所有 jQuery 代码的权衡可能值得付出努力 - 我没有成功。

脚本在做什么:当悬停一个 sectionBox 时，所有其他 sectionBox(es) fadeTo 的值为 0.4。该脚本不使用分配给每个 SectionBox 的 ID。

问题是:如何在 Javascript 中处理 children 和 siblings 的等价物？

更新:在做了一些功课后，我想出了一些自己的功能代码，这离实现同等功能和平滑过渡的最终目标还很远，但至少在功能上可以与 jQuery 代码中的现有功能相媲美。我还改写了问题。

提供了一个非常好的仅使用 CSS 的解决方案来解决这个问题。不过，我想了解是否以及如何用纯 Javascript 解决这个问题。

目前有三列。左列和中列受我的作业代码影响，而右列使用原始 jQuery 代码。

我建议看下面的示例以形象化预期的目标。

这里有几个问题:

Q1:如何将功能组合成更少但更高效的功能？这样悬停一个元素就会包含三列中的所有元素。

在 Codepen 中运行代码可以观察到，当离开一列(左侧或中间)时，最后悬停的元素保持低不透明度值。Q2:如何控制这种行为？

/* --- code to convert ---*/
/*hover left column*/
/*$("#left").children().hover(function() {
  $(this).siblings().stop().fadeTo(300,0.4);
  $('#center > .sectionBox').stop().fadeTo(300,0.4);
  $('#right > .sectionBox').stop().fadeTo(300,0.4);
}, 
function() {
  $(this).siblings().stop().fadeTo(200,1);
  $('#center > .sectionBox').stop().fadeTo(200,1);
  $('#right > .sectionBox').stop().fadeTo(200,1);
});
*/

/* --- attempt to convert jQuery code from above ---*/
/* --- currently affecting left- and center-columns only --- */
/* --- How to combine functions into less and more efficient functions */
/*
var elem_IDLft = 'left'
var elem_IDCtr = 'center'
var elem_IDRgt = 'right'
*/
/* --- LEFT Column ---*/
var elemLft_ID = 'left'
var elemL_name = document.getElementById(elemLft_ID).children;
var elemL_length = elemL_name.length;

for (var i=0; i<elemL_length; i++) {
  elemL_name[i].addEventListener("mouseover", mouseOverL);
  elemL_name[i].addEventListener("mouseout", mouseOutL);
}
/*---mouse events---*/
/*---Don't use: style.display = "none"--*/
//function mouseOver() {this.style.opacity = "1.0";}
//function mouseOut() {this.style.opacity = "0.4";}

function mouseOverL() {
  for (var i=0; i<elemL_length; i++) {
    if (elemL_name[i] === this) {elemL_name[i].style.opacity = "1.0";} 
  else {elemL_name[i].style.opacity = "0.5";}
  }
  return;
}

function mouseOutL() {
  for (var i=0; i<elemL_length; i++) {
    if (elemL_name[i] !== this) {elemL_name[i].style.opacity = "1.0";} 
  else {elemL_name[i].style.opacity = "0.5";}
  }
  return;
}

// --- To-Do: smooth Transitions

/* --- CENTER Column ---*/
var elemCtr_ID = 'center'
var elem_name = document.getElementById(elemCtr_ID).children;
var elem_length = elem_name.length;

for (var i=0; i<elem_length; i++) {
  elem_name[i].addEventListener("mouseover", mouseOver);
  elem_name[i].addEventListener("mouseout", mouseOut);
}
/*---mouse events---*/
/*---Don't use: style.display = "none"--*/
//function mouseOver() {this.style.opacity = "1.0";}
//function mouseOut() {this.style.opacity = "0.4";}

function mouseOver() {
  for (var i=0; i<elem_length; i++) {
    if (elem_name[i] === this) {elem_name[i].style.opacity = "1.0";} 
  else {elem_name[i].style.opacity = "0.5";}
  }
  return;
}

function mouseOut() {
  for (var i=0; i<elem_length; i++) {
    if (elem_name[i] !== this) {elem_name[i].style.opacity = "1.0";} 
  else {elem_name[i].style.opacity = "0.5";}
  }
  return;
}

/* --- Question: How to properly get the inverse for the above 'this' ?---*/
/* --- So that the element 'this' (hovered) has style.opacity = 1 ---*/
/* --- and all others from elem_name get style.opacity = 0.4 --- */
/* --- At the moment it's really bumpy --- */
/* --- Possibly caused by many forced reflows while executing Javascript occur --- */
/* --- The goal is to obtain smooth transitions ---*/

/*-------------------------------------*/
/*--- more jQuery code for columns 'center' and 'right' ---*/
/*--- center column*/
/*
$("#center").children().hover(function() {
  $(this).siblings().stop().fadeTo(300,0.4);
  $('#left > .sectionBox').stop().fadeTo(300,0.4);
  $('#right > .sectionBox').stop().fadeTo(300,0.4);
}, 
function() {
  $(this).siblings().stop().fadeTo(200,1);
  $('#left > .sectionBox').stop().fadeTo(200,1);
  $('#right > .sectionBox').stop().fadeTo(200,1);
});
*/
/*--- right column*/
$("#right").children().hover(function() {
  $(this).siblings().stop().fadeTo(300,0.4);
  $('#center > .sectionBox').stop().fadeTo(300,0.4);
  $('#left > .sectionBox').stop().fadeTo(300,0.4);
}, 
function() {
  $(this).siblings().stop().fadeTo(200,1);
  $('#center > .sectionBox').stop().fadeTo(200,1);
  $('#left > .sectionBox').stop().fadeTo(200,1);
});

/*liquid display*/
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}
html {font-size:10px; color:#fff; background-color:#242424;}

#wrapper {width: 100%;font-size: 1.2rem; overflow: hidden}
.column {float: left; width: 31.0%; margin-right: 3.5%;} /* 100%-(3*31%)=7%/2=3.5%*/
.last {margin-right: 0;}

h1 {font-size: 1.2rem; text-align:center;padding:-1rem;}
@media screen and (max-width: 800px) {#left.column, #center.column, #right.column {width: 100%;}}

.sectionBox {
background-color: rgba(100,100,100,1.0);
box-shadow: 5px 5px 7px #111;
margin: 0 0 2.0rem 0;
padding: 0.1rem;
}

.sectionBox > p > code {background-color:#efefef; color:#111;}

#left {color:#fffaaa;}
#center {color:#fffccc;}
#right {color:#fffeee;}

<div id="wrapper">
  <div class="sectionBox"><h1>Flexbox - fadeTo - transition: from jQuery to pure Javascript</h1>
    <p><strong>An attempt to translate this jQuery 'fadeTo'-function to pure Javascript.</strong>
      <br />
      <code>
    /*hover left column*/<br>
$("#left").children().hover(function() {
  $(this).siblings().stop().fadeTo(300,0.4);
  $('#center > .sectionBox').stop().fadeTo(300,0.4);
  $('#right > .sectionBox').stop().fadeTo(300,0.4);
}, 
function() {
  $(this).siblings().stop().fadeTo(200,1);
  $('#center > .sectionBox').stop().fadeTo(200,1);
  $('#right > .sectionBox').stop().fadeTo(200,1);
});      
    </code>
    </p>
</div>
  
  <div id="left" class="column">id="left"
    <section class="sectionBox"><h1>id="newPictures"</h1>
		</section>
    <section class="sectionBox"><h1>id="oldPictures"</h1>
		</section>
		<section class="sectionBox"><h1>id="somePlace"</h1>
		</section>
		<section class="sectionBox"><h1>id="someOtherPlace"</h1>
		</section>
	</div>

  <div id="center" class="column">id="center"
		<section class="sectionBox"><h1>id="travelNews"</h1>
		</section>
		<section class="sectionBox"><h1>id="otherTravelNews"</h1>
		</section>
		<section class="sectionBox"><h1>id="impressum"</h1>
		</section>
	</div>

  <div id="right" class="column last">id="right"
		<section class="sectionBox"><h1>id="search"</h1>
		</section>
		<section class="sectionBox"><h1>id="toolsFaq"</h1>
		</section>
	</div>
</div>	<!--.wrapper-->

这是相关 jQuery 代码的工作示例。

/*hover left column*/
$("#left").children().hover(function() {
  $(this).siblings().stop().fadeTo(300,0.4);
  $('#center > .sectionBox').stop().fadeTo(300,0.4);
  $('#right > .sectionBox').stop().fadeTo(300,0.4);
}, 
function() {
  $(this).siblings().stop().fadeTo(200,1);
  $('#center > .sectionBox').stop().fadeTo(200,1);
  $('#right > .sectionBox').stop().fadeTo(200,1);
});

/*hover center column*/
/*same function for "#center" and "#right" columns*/

... 这是 codepen 上的相同代码。 Link to Codepen

Answer 1

您可以使用 Element.animate()

const div = document.getElementById("animate");

div.onclick = () => {
  div.animate({
      opacity: 0
    }, {
      duration: 1000,
      easing: "linear",
      iterations: 1,
      fill: "both"
    })
    .onfinish = function() {     
      console.log(div.style.opacity);         
    }
}

#animate {
  width: 50px;
  height: 50px;
  background: blue;
  color: gold;
}

<div id="animate">click</div>