title: Attempt to write jQuery fadeTo effect in Javascript
body: <p>A Website uses only one single jQuery function which we'd like to replace by an equal pure Javascript function. However I struggle to convert (translate) that function. 
  I am aware jQuery is perfect for that task but the trade-off to download all jQuery code for the few lines of Javascript might be worth the effort - in which I do not succeed. </p>
  
  <p><strong>What the script is doing</strong>:
  When hovering a sectionBox the all other sectionBox(es) fadeTo a value of 0.4.
  The script does NOT utilize IDs assigned to each SectionBox. </p>
  
  <p>The question is: How to handle the equivalent of children and siblings in Javascript?</p>
  
  <p><strong>Update:</strong>
  After doing some homework I came up with some own functional code which is far from the final Goal to achieve equal functionality and smooth transitions, but at least in its functionality comparable to the existing function in the jQuery code.
  Also I rephrased the question(s).</p>
  
  <p>A really great solution using CSS only was provided to solve the problem. However I'd like to learn whether and how I can solve this in pure Javascript.</p>
  
  <p>Currently there are three columns. Left and Center columns are affected by my homework-code whereas the column to the right uses the original jQuery code.</p>
  
  <p>May I suggest to look at the example below to visualize the anticipated Goal.</p>
  
  <p>Here are few <strong>Questions</strong>:</p>
  
  <p><strong>Q1</strong>: How can the functions be combined into less and more efficient functions?
  So that hovering an element encompasses all elements in the three columns.</p>
  
  <p>Running the code in Codepen one can observe that when leaving a column (left or center) the last item hovered remains with a value of low opacity.
  <strong>Q2</strong>: How can this behaviour be controlled?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* --- code to convert ---*/
  /*hover left column*/
  /*$("#left").children().hover(function() {
    $(this).siblings().stop().fadeTo(300,0.4);
    $('#center &gt; .sectionBox').stop().fadeTo(300,0.4);
    $('#right &gt; .sectionBox').stop().fadeTo(300,0.4);
  }, 
  function() {
    $(this).siblings().stop().fadeTo(200,1);
    $('#center &gt; .sectionBox').stop().fadeTo(200,1);
    $('#right &gt; .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&lt;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&lt;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&lt;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&lt;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&lt;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&lt;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 &gt; .sectionBox').stop().fadeTo(300,0.4);
    $('#right &gt; .sectionBox').stop().fadeTo(300,0.4);
  }, 
  function() {
    $(this).siblings().stop().fadeTo(200,1);
    $('#left &gt; .sectionBox').stop().fadeTo(200,1);
    $('#right &gt; .sectionBox').stop().fadeTo(200,1);
  });
  */
  /*--- right column*/
  $("#right").children().hover(function() {
    $(this).siblings().stop().fadeTo(300,0.4);
    $('#center &gt; .sectionBox').stop().fadeTo(300,0.4);
    $('#left &gt; .sectionBox').stop().fadeTo(300,0.4);
  }, 
  function() {
    $(this).siblings().stop().fadeTo(200,1);
    $('#center &gt; .sectionBox').stop().fadeTo(200,1);
    $('#left &gt; .sectionBox').stop().fadeTo(200,1);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*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 &gt; p &gt; code {background-color:#efefef; color:#111;}
  
  #left {color:#fffaaa;}
  #center {color:#fffccc;}
  #right {color:#fffeee;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;div class="sectionBox"&gt;&lt;h1&gt;Flexbox - fadeTo - transition: from jQuery to pure Javascript&lt;/h1&gt;
      &lt;p&gt;&lt;strong&gt;An attempt to translate this jQuery 'fadeTo'-function to pure Javascript.&lt;/strong&gt;
        &lt;br /&gt;
        &lt;code&gt;
      /*hover left column*/&lt;br&gt;
  $("#left").children().hover(function() {
    $(this).siblings().stop().fadeTo(300,0.4);
    $('#center &gt; .sectionBox').stop().fadeTo(300,0.4);
    $('#right &gt; .sectionBox').stop().fadeTo(300,0.4);
  }, 
  function() {
    $(this).siblings().stop().fadeTo(200,1);
    $('#center &gt; .sectionBox').stop().fadeTo(200,1);
    $('#right &gt; .sectionBox').stop().fadeTo(200,1);
  });      
      &lt;/code&gt;
      &lt;/p&gt;
  &lt;/div&gt;
    
    &lt;div id="left" class="column"&gt;id="left"
      &lt;section class="sectionBox"&gt;&lt;h1&gt;id="newPictures"&lt;/h1&gt;
    &lt;/section&gt;
      &lt;section class="sectionBox"&gt;&lt;h1&gt;id="oldPictures"&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="somePlace"&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="someOtherPlace"&lt;/h1&gt;
    &lt;/section&gt;
   &lt;/div&gt;
  
    &lt;div id="center" class="column"&gt;id="center"
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="travelNews"&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="otherTravelNews"&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="impressum"&lt;/h1&gt;
    &lt;/section&gt;
   &lt;/div&gt;
  
    &lt;div id="right" class="column last"&gt;id="right"
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="search"&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class="sectionBox"&gt;&lt;h1&gt;id="toolsFaq"&lt;/h1&gt;
    &lt;/section&gt;
   &lt;/div&gt;
  &lt;/div&gt; &lt;!--.wrapper--&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the working example of the relevant jQuery code.</p>
  
  <pre><code>/*hover left column*/
  $("#left").children().hover(function() {
    $(this).siblings().stop().fadeTo(300,0.4);
    $('#center &gt; .sectionBox').stop().fadeTo(300,0.4);
    $('#right &gt; .sectionBox').stop().fadeTo(300,0.4);
  }, 
  function() {
    $(this).siblings().stop().fadeTo(200,1);
    $('#center &gt; .sectionBox').stop().fadeTo(200,1);
    $('#right &gt; .sectionBox').stop().fadeTo(200,1);
  });
  
  /*hover center column*/
  /*same function for "#center" and "#right" columns*/
  </code></pre>
  
  <p>... and here is the same code over at codepen.
  <a href="https://codepen.io/snahl/pen/mpNbrw" rel="nofollow noreferrer">Link to Codepen</a>  </p>