Попытка написать эффект jQuery fadeTo в Javascript

snahl спросил: 26 декабря 2017 в 07:41 в: javascript

Веб-сайт использует только одну функцию jQuery, которую мы хотели бы заменить на равную чистую функцию Javascript. Однако я изо всех сил пытаюсь преобразовать (перевести) эту функцию. Я знаю, что jQuery идеально подходит для этой задачи, но компромисс, чтобы загрузить весь код jQuery для нескольких строк Javascript, может стоить усилий - в которых мне не удается.

Что делает скрипт: при зависании sectionBox все остальные разделы fieldBox (ы) fadeTo имеют значение 0.4.Сценарий НЕ использует идентификаторы, назначенные каждому разделу.

Вопрос: как обрабатывать эквивалент детей и братьев и сестер в Javascript?

Обновление: После выполнения домашней работы я придумал какой-то собственный функциональный код, который вдали от конечной цели, чтобы обеспечить равную функциональность и плавные переходы, но по крайней мере по функциональности, сопоставимой с существующей функцией в коде jQuery. Также я перефразировал вопрос (ы).

Действительно отличное решение, использующее Для решения проблемы был предоставлен только CSS. Однако я хотел бы узнать, как и как я могу решить это в чистом Javascript.

В настоящее время существует три столбца. Столбцы Left и Center подвержены влиянию моего домашнего кода, тогда как столбец вправо использует исходный код jQuery.

Могу ли я предложить пример ниже, чтобы визуализировать ожидаемую цель.

p> Вот несколько Вопросов:

Q1: как функции могут быть объединены в более менее эффективные функции? Таким образом, чтобы зависание элемента охватывало все элементы в трех столбцах.

Запустив код в кодеде, можно заметить, что при выходе из столбца (слева или по центру) последний элемент, зависающий, остается со значением низкой непрозрачности. 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

0 ответов