Efekt migotania tekstu w HTML i JS

Question

Witam wszystkich,

Mój problem przedstawia się następująco:

NAJPIERW ZAŁOŻENIE

chciałbym aby tekst bądź każdy element z klasą "blink" zmieniał swój kolor z czarnego na biały i na odwrót co sekundę. w celu skupienia uwagi użytkownika na pojedynczym elemencie na stronie

PRZYKŁADOWY ELEMENT:

<!-- NIE MOGŁEM ZNALEŹĆ JĘZYKA HTML W ZAKŁADCE DLATEGO XHTML -->

<div class="blink" id="startBlink">przykładowy tekst</div>

Przygotowałem również kod w JS z dołączoną do niego biblioteką jquerry którego zadaniem jest zmienianie koloru na biały jeżeli zmienna white jest równa false oraz na czarny jeżeli zmienna white jest równa true z tym że po każdej zmianie koloru funkcja BLINK  zmienia wartość white na false jeżeli równa jest true i na odwrót

KOD W JS

var button = document.getElementById("startBlink"); 
button.addEventListener('click', blink);

var white = false;

function blink()
{
    if(white = false)
    {
        $('.blink').css('color', 'white');
        white = true;
    }
    if(white = true)
    {
        $('.blink').css('color', 'black')
        white = false;
    }
}

Ale nie działa nic w tym kodzie w sensie kolor nie rusza z miejsca i tak szczerze mówiąc nie wiem zupełnie co się z tym dzieje. Więc pytanie brzmi: CO ZAWIODŁO?

 

Answer 1

Proponuje "podmieniać" klasy

<div class="blink" id="startBlink">przykładowy tekst</div>

.blink {
  cursor: pointer;
}
.blink--white {
  color: white;
  background-color: black;
}
.blink--black {
  color: black; 
  background-color: white;
}

const button = document.getElementById("startBlink"); 
button.addEventListener('click', blink);

function blink()
{
  if (button.classList.contains('blink--black'))
  {
    button.classList.remove('blink--black');
    button.classList.add('blink--white');
  } 
  else
  {
    button.classList.remove('blink--white');
    button.classList.add('blink--black');
  }
}

 

Tylko, że w ten sposób klikanie inicjuje efekt "blink", trzeba dodać np. setInterval.

Comments

Dzięki wielkie działa extra

---

Kliknięcie zaczyna efekt "blink" kolejne zatrzymuje i tak "w kółko" 

const button = document.getElementById("startBlink"); 
button.addEventListener('click', blink);

let clearID;

function blink()
{
  if (!clearID)
  {
    clearID = setInterval(() => {
      if (button.classList.contains('blink--black'))
      {
        button.classList.remove('blink--black');
        button.classList.add('blink--white');
      } 
      else
      {
        button.classList.remove('blink--white');
        button.classList.add('blink--black');
      }
    }, 1000);
  }
  else
  {
    clearInterval(clearID);
  }
}

 

---

Bardziej "płynny" efekt zamiany kolorów

.blink {
  cursor: pointer;
  transition: all 0.5s;
}
.blink--white {
  color: white;
  background-color: black;
}
.blink--black {
  color: black; 
  background-color: white;
}

 

---

Efekt blink tylko css

<div class="blink" id="startBlink">przykładowy tekst</div>

.blink {
  cursor: pointer;
  animation: blink 2s infinite;
}
@keyframes blink {
  0%, 49% {
    color: white;
    background-color: black;
  }
  50%, 100% {
    color: black; 
    background-color: white;
  }
}

 

---

Efekt blink css variables

<div class="blink blink--black-white">przykładowy tekst</div>
<div class="blink blink--red-white">przykładowy tekst</div>

.blink {
  cursor: pointer;
  margin: 1em;
  animation: blink 2s infinite;
}
.blink--black-white {
  --color1: white;
  --color2: black;
}
.blink--red-white {
  --color1: white;
  --color2: red;
}
@keyframes blink {
  0%, 49% {
    color: var(--color1);
    background-color: var(--color2);
  }
  50%, 100% {
    color: var(--color2); 
    background-color: var(--color1);;
  }
}

 

Answer 2

W funkcji blink jeśli zmienna white jest false (to porównanie czy podstawienie?) zmieniasz white na true.

A potem zamiast użyć else sprawdzasz ponownie tą zmienną, tym razem czy jest true. Otoż jest. przed chwilą ją ustawiłeś.

Comments

Według mojego założenia w funkcji blink pierwszy if powinien sprawdzać czy white jest równe false i jeżeli tak to zmieniać kolor

 

więc przypuszczalnie jeżeli bym zmienił drugiego if'a na else to mogło by zadziałać ale spróbowałem przed chwilą i nie działa nadal

---

Jeszcze musisz pamiętać, że = to podstawienie, porównanie to == lub ===.