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

opóźnienie kodu

VPS Starter Arubacloud
+1 głos
154 wizyt
pytanie zadane 16 kwietnia 2021 w JavaScript przez AgentTecza Obywatel (1,810 p.)

Witam mam problem i pewnie jest on prosty do rozwiązania, ale nie mogę sobie z nim poradzić mam tutaj 2 linki kodu:

const content = document.querySelector(".tekst");
content.classList.add('active');

jak sprawić żeby drugą część czyli dodanie klasy "active" wykonała się po np. 10 sekundach?

Z góry dziękuje za odpowiedź!

2 odpowiedzi

+4 głosów
odpowiedź 16 kwietnia 2021 przez mb-dir Mądrala (6,710 p.)
edycja 16 kwietnia 2021 przez mb-dir

Witaj,

Wydaje mi się, że rozwiązaniem twojego problemu może być skorzystanie z metody setTimeout, o której możesz poczytać tu

 

Edit: Jeżeli klasa active powiązana jest z transition lub z animacjami, to możesz w css'ie ustawić delay na interesujący cie okres czasu - transition, animation delay

0 głosów
odpowiedź 16 kwietnia 2021 przez VBService Ekspert (251,210 p.)
edycja 17 kwietnia 2021 przez VBService

Z użyciem funkcji strzałkowej, sprawa jest banalnie prosta (chodzi o zapis).

Jak już wspomniał @Michał Bysiewicz, setTimeout(...), np.:

const content = document.querySelector(".tekst");
setTimeout(() => { content.classList.add('active') }, 5000); // w ms, 1000 = 1sekunda

 

wink

<div class="box-wrap">
  <div class="circle green"></div>
  <div class="circle red"></div>
</div>
* {
  box-sizing: border-box;
}
.box-wrap {
  display: flex;
  justify-items: center;
  width: 130px;
  height: 65px;
  margin: 1em;
  background-color: silver;
  border-radius: 2em;
}
.box-wrap .circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 0.5em;
  transition: all 0.9s;
}
.green {
  background-color: green;
  background-image: radial-gradient(silver, green);
  box-shadow: 0 0 2px 4px limegreen;
}
.red {
  background-color: red;
  background-image: radial-gradient(silver, red);
  box-shadow: 0 0 2px 4px lightcoral;
}
const circle_light = document.querySelectorAll('.circle');

setTimeout(() => {
  setInterval(() => {
    circle_light.forEach(item => {
      item.classList.toggle('green');
      item.classList.toggle('red');
    })
  }, 1000)
}, 2000)

 

komentarz 17 kwietnia 2021 przez AgentTecza Obywatel (1,810 p.)
Dziękuje za odpowiedź, lecz chciałem zrobić jeszcze jedną rzecz do tego kodu a mianowicie odjeżdżanie tych elementów i czemu zdjęcia odjeżdżają a tytuł z nimi nie?
Kod:https://codepen.io/AgentTecza/pen/xxgqywN
chciałbym żeby odjeżdżało wszystko na raz lecz nie wiem jak to wykonać. Mógłbyś mi jakoś pomóc?
komentarz 17 kwietnia 2021 przez VBService Ekspert (251,210 p.)
edycja 17 kwietnia 2021 przez VBService

U Mnie na chromie działa, "odjeżdża" cała zawartość diva (slider-wrap)

 

Tak na marginesie, to:

setTimeout(() => {content.classList.add('active') },1000);
setTimeout(() => {content.classList.add('active1') },1000);

na

setTimeout(() => {
  content.classList.add('active'); 
  content.classList.add('active1');
}, 1000);

 

 

BTW fajny efekt jest przez dodanie: opacity.  wink 

@keyframes odjazd {
    100% {
        transform: translateX(-2000px);
        opacity: 0;
    }
}

 

komentarz 17 kwietnia 2021 przez AgentTecza Obywatel (1,810 p.)
Tak slider-wrap odjeżdża tylko ja bym chciał żeby jeszcze odjeżdżał napis razem z tym czyli "ELOOOO" tylko nie wiem dlaczego nie działa.
komentarz 17 kwietnia 2021 przez VBService Ekspert (251,210 p.)
edycja 17 kwietnia 2021 przez VBService

bo odwołujesz się 2 razy do content

const content = document.querySelector(".slider-wrap");
const title = document.querySelector(".slider-title");
setTimeout(() => {
  content.classList.add('active'); 
  content.classList.add('active1');
}, 1000);

a powinno być: content i title  (i wystarczy przypisanie class-y active do obydwu)

const content = document.querySelector(".slider-wrap");
const title = document.querySelector(".slider-title");
setTimeout(() => {
  content.classList.add('active'); 
  title.classList.add('active');
}, 1000);

 

Podobne pytania

0 głosów
2 odpowiedzi 385 wizyt
pytanie zadane 16 sierpnia 2021 w JavaScript przez MarCiu Nowicjusz (160 p.)
0 głosów
1 odpowiedź 565 wizyt
pytanie zadane 9 października 2019 w JavaScript przez kamiz Obywatel (1,010 p.)
0 głosów
1 odpowiedź 115 wizyt
pytanie zadane 4 listopada 2018 w JavaScript przez LinosiK Obywatel (1,920 p.)

92,453 zapytań

141,262 odpowiedzi

319,087 komentarzy

61,854 pasjonatów

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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...