• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

jQuery efekt mgły, wyłączonego elementu

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
281 wizyt
pytanie zadane 1 kwietnia 2017 w JavaScript przez niezalogowany

Cześć, potrzebuję uzyskać taki efekt że wybrany przeze mnie wiersz tabeli, będzie na starcie przyciemniony, za mgłą, nieaktywny. A po najechaniu myszką na ten element (wiersz tabeli) będzie się rozjaśniał i poprzedni efekt będzie znikał.

Wie ktoś jak coś takiego napisać ? bo niestety ja nigdy nie pracowałem na tyle z jQuery aby to zrobić samemu.

z góry dziękuję za każdą formę pomocy. 

2 odpowiedzi

0 głosów
odpowiedź 2 kwietnia 2017 przez xmentor Nałogowiec (49,520 p.)
wybrane 2 kwietnia 2017
 
Najlepsza

A do czego jQuery?

<table>
  <caption>Lista osób</caption>
  <tr>
    <th>Lp.</th>
    <th>Imię</th>
  </tr>
  <tr class="cover">
    <td>1</td>
    <td>Adam</td>
  </tr>
</table>
.cover{
  filter: blur(3px);
  transition: filter .2s ease-in;
}
.cover:hover{
  filter: blur(0);
}

Chyba, że po najechaniu chcesz aby efekt znikł w ogóle, wtedy kombinuj coś z https://api.jquery.com/hover/

komentarz 2 kwietnia 2017 przez niezalogowany

SUPER!!!, wielkie dzięki! takiej opcji nie brałem nawet pod uwagę.

jak zawsze prostota wygrywa.

0 głosów
odpowiedź 2 kwietnia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
document.addEventListener ("DOMContentLoaded", start);

function start(){
	createEventListener();
}

function createEventListener(){
var nodes = document.QuerySelectorAll("tr");
console.log(nodes);
nodes.forEach((nodes) => { nodes.addEventListener("click",
														function(e) {
														something(e)
														});
													});
}
function something(e){
if (myModule.apiStart){
myModule.flush();
}
var children = e.childNodes;
children.forEach( (node) => {node.style.background="black";});
myModule.setNode(e);
myModule.setApiStarted(true);
}

var myModule = function() {
this.activedNode;
this.apiStart = false;
this.setNode = function (node){
this.activedNode = node;
}
this.setApiStarted = function(bool){
this.apiStart = bool;
}
this.flush = function(){
this.activedNode.style.background = "none";
}
}
Plus minus coś takiego, przepisz go sobie na ładniejszy kod :)

Podobne pytania

0 głosów
2 odpowiedzi 203 wizyt
pytanie zadane 21 lutego 2017 w JavaScript przez Lukasz9210 Obywatel (1,060 p.)
0 głosów
3 odpowiedzi 2,322 wizyt
pytanie zadane 4 listopada 2016 w JavaScript przez Mavimix Dyskutant (8,420 p.)

93,164 zapytań

142,175 odpowiedzi

321,927 komentarzy

62,491 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 682p. - dia-Chann
  2. 670p. - CC PL
  3. 669p. - Łukasz Piwowar
  4. 656p. - Łukasz Eckert
  5. 567p. - ssynowiec
  6. 453p. - Marcin Putra
  7. 428p. - rafalszastok
  8. 423p. - Michal Drewniak
  9. 423p. - Adrian Wieprzkowicz
  10. 418p. - rucin93
  11. 415p. - Mikbac
  12. 410p. - Piotr Aleksandrowicz
  13. 408p. - ksalekk
  14. 402p. - Mariusz Fornal
  15. 401p. - Dawid128
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...