尝试在Javascript

Question

网站只使用一个单独的jQuery函数，我们希望用相同的纯Javascript函数替换它。但是我很难转换（翻译）这个功能。 我知道jQuery对于这个任务是完美的，但是为几行Javascript下载所有jQuery代码的权衡可能是值得的 - 我没有成功。

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

问题是：如何在Javascript中处理相同的孩子和兄弟姐妹？

更新 在完成一些功课之后，我想出了一些自己的功能代码，它远远不是最终的目标，以实现相同的功能和平滑过渡，但至少在功能上与jQuery代码中的现有功能相当。 我也改写了这个问题。

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

目前有三列。 Left和Center列受我的作业代码的影响，而右边的列使用原始的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

你不需要jQuery ......你甚至不需要javascript。

纯CSS会做：

/*liquid display*/
body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}
html {font-size:10px; color:#fff; background-color:#242424;}
#wrapper {overflow: hidden; width: 100%;}
.column {float: left; width: 31.0%; margin-right: 3.5%;} /* 100%-(3*31%)=7%/2=3.5%*/
.last {margin-right: 0;}
@media screen and (max-width: 800px) {#left.column, #center.column, #right.column {width: 100%;}}

.sectionBox {
font-size: 1.6rem;
background-color: rgba(100,100,100,1.0);
box-shadow: 5px 5px 7px #111;
margin: 0 0 1.5rem 0;
padding: 0.5rem 0.3rem 0.5rem 0.3rem;
opacity:1; /* set initial opacity and transition time*/
transition:opacity 200ms ease; /*for when hover-out*/
}

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


#wrapper{
  pointer-events: none; /*prevents the :hover from firing*/
}                       /*when not actually on an item */
.sectionBox{
  pointer-events:auto; /*resets the hover on the items */
}
#wrapper:hover .sectionBox{
  opacity:0.4; /*when hovering the container, all items becomes translucent*/
  transition: opacity 300ms ease;
}

#wrapper:hover .sectionBox:hover{
  opacity:1; /*prevents the specific hovered item opacity from changing*/
}

<div id="wrapper"> 
	<div id="left" class="column">
		<section class="sectionBox"> id="newPictures"
		</section>
		<section class="sectionBox"> id="oldPictures"
		</section>
		<section class="sectionBox"> id="somePlace"
		</section>
	</div>
	<div id="center" class="column">
		<section class="sectionBox"> id="travelNews"
		</section>
		<section class="sectionBox"> id="impressum"
		</section>
	</div>

	<div id="right" class="column last">
		<section class="sectionBox"> id="search"
		</section>
		<section class="sectionBox"> id="toolsFaq"
		</section>
	</div>
</div>

诀窍是在容器上使用悬停来调整所有子项的不透明度，同时将指针事件设置为none，以便在实际上不在子项上时不会触发。 然后它只是在特定子项上使用悬停将不透明度重置为1，并调整过渡。

100％纯CSS魔术FTW！

Answer 2

您可以使用Element.animate()

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;