Încercarea de a scrie efectul jQuery fadeTo în Javascript (Programare, Javascript, Jquery, Html, Css, Onhover)

snahl a intrebat.
a intrebat.

Un site web utilizează o singură funcție jQuery pe care am dori să o înlocuim cu o funcție Javascript pură și egală. Cu toate acestea mă chinui să convertesc (traduc) acea funcție. Sunt conștient că jQuery este perfect pentru această sarcină, dar compromisul de a descărca tot codul jQuery pentru cele câteva linii de Javascript ar putea merita efortul – în care nu reușesc.

Ce face scriptul:Când se trece pe deasupra unui sectionBox toate celelalte sectionBox(e) se estompeazăLa o valoare de 0,4.Scriptul NU utilizează ID-urile atribuite fiecărui SectionBox.

Întrebarea este: Cum să gestionez echivalentul copiilor și fraților în Javascript?

Actualizare:După ce mi-am făcut temele am venit cu un cod funcțional propriu care este departe de scopul final Goal pentru a obține o funcționalitate egală și tranziții fluide, dar cel puțin în funcționalitatea sa comparabilă cu funcția existentă în codul jQuery. de asemenea, am reformulat întrebarea (întrebările).

A fost oferită o soluție foarte bună folosind doar CSS pentru a rezolva problema. Aș vrea însă să aflu dacă și cum pot rezolva problema în pur Javascript.

În prezent sunt trei coloane. Coloanele din stânga și centru sunt afectate de codul meu de temă, în timp ce coloana din dreapta folosește codul original jQuery.

Pot să vă sugerez să vă uitați la exemplul de mai jos pentru a vizualiza scopul anticipat.

Aici sunt câteva Întrebări:

Q1: Cum pot fi combinate funcțiile în funcții mai puține și mai eficiente?Astfel încât la trecerea unui element pe deasupra unui element să cuprindă toate elementele din cele trei coloane.

Rulând codul în Codepen se poate observa că atunci când se părăsește o coloană (stânga sau centru) ultimul element survolat rămâne cu o valoare de opacitate scăzută.Q2: Cum poate fi controlat acest comportament?

Acesta este exemplul de lucru al codului jQuery relevant.

/*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*/

… și iată același cod la codepen.Legătură către Codepen

Comentarii

  • Extrageți și copiați și lipiți codul relevant de la jQuery și viola – aveți cross browser fadeTo fără jQuery … –  > Por davidkonrad.
  • Rețineți că jQuery este o bibliotecă JavaScript, deci da, ar trebui să fie posibil. –  > Por Patrick Gregorio.
  • @davidkonrad – Îmi pare rău, nu înțeleg. La ce anume vă referiți prin „extrage și copy-paste”. Codul este aici, extrageți ce de unde, apoi copiați unde? Sunt nedumerit. –  > Por snahl.
  • @snahl verifică răspunsul de mai jos, nu e nevoie să folosești niciun javascript pentru asta 😉 –  > Por Facundo Corradini.
  • @facundo-forradini – funcția afectează cel puțin 2 DIV-uri semnalate în întrebare: La trecerea pe deasupra unui sectionBox toate celelalte sectionBox(e) se estompeazăLa o valoare de 0,4. –  > Por snahl.
2 răspunsuri
guest271314

Puteți folosi Element.animate()

Comentarii

  • @AngelPolitis Care este rezultatul la lansarea Chrome cu --enable-experimental-web-platform-features flag, fie închizând mai întâi toate instanțele de Chrome care rulează, fie setând și --user-data-dir flag într-un alt folder de configurare decât instanța de Chrome în execuție? –  > Por guest271314.
  • Prin activarea --enable-experimental-web-platform-features flag, funcționează, așa că ai câștigat votul meu pozitiv! Dar, totuși, mă tem că este destul de inutil pentru OP sau pentru orice site de producție în acest moment. –  > Por Angel Politis.
Facundo Corradini

Nu ai nevoie de jQuery pentru asta… și nici măcar nu ai nevoie de javascript.

CSS-ul pur va fi suficient:

Trucul este să folosiți hover-ul pe container pentru a ajusta opacitatea tuturor copiilor, în timp ce setați pointer-evenimentele la none, astfel încât să nu se declanșeze atunci când nu se află deasupra unui copil. Apoi, trebuie doar să folosiți hover-ul pe un anumit copil pentru a reseta opacitatea la 1 și să ajustați tranzițiile.

100% magie CSS pură FTW!

Comentarii

  • Minunat și mulțumesc! Asta funcționează foarte bine. Folosesc aceeași metodă pentru meniurile mele de pe site-ul meu, dar nu am fost conștient de evenimentele de pointer CSS: cuprinzând elemente mai sus în ierarhie. Nu este răspunsul direct la întrebarea mea (s), dar este o soluție foarte bună, servește scopului și rezolvă problema care a dus la întrebarea mea. Așa că îți dau upvote. Cu toate acestea, am făcut destul de multe teme și aș fi curios să aflu cum să realizez același lucru în Javascript pur. –  > Por snahl.