Przycisk i ukrywanie elementów

pytanie zadane 5 grudnia 2016 w JavaScript przez ayo1001 Obywatel (1,890 p.)

Cześć,

Mam przycisk, który ma klasę: toggle , po kliknięciu dodaje się klasa: active , czyli potem wygląda tak: class="toggle active"

Przykładowy kod:

<!-- Przycisk -->
<span class="toggle"></span>

<!-- Element 1 -->
<div class="box">
...
</div>

<!-- Element 2 -->
<div class="box">
...
</div>


<!-- Element 3 -->
<div class="box">
...
</div>

Jak przerobić przycisk .toggle, żeby po aktywacji i najechaniu myszką na jeden:

<div class="box">
...
</div>

Na pozostałych ".box" dodawał opacity: 0.25 i jakieś łagodne przejście np. w transation?

1 odpowiedź

odpowiedź 5 grudnia 2016 przez Olaf Siwiński Mądrala (7,060 p.)
wybrane 6 grudnia 2016 przez ayo1001

Najlepsza

Zrobiłem to w czystym javascript'cie. Jeżeli używać jQuery i koniecznie potrzebujesz zapisać tę cześć kodu w oparciu o bibliotekę to z tym też chętnie pomogę.

var boxes = document.getElementsByClassName('box'),
    boxClick = function() {
      console.log('test');
      if (!document.getElementsByClassName('toggle')[0].classList.contains('active')) return;
      this.classList.add('activeBox');
      for (var i=0; i < boxes.length; i++) {
        if (boxes[i].classList.contains('activeBox')) continue;
        boxes[i].classList.add('TwojaKlasaZCssDlaBoxowZLagodnymPrzejsciem');
      }
    }

for (var i=0; i < boxes.length; i++) {
  boxes[i].addEventListener('click', boxClick, false);
}

komentarz 5 grudnia 2016 przez ayo1001 Obywatel (1,890 p.)

Byłoby fajnie, gdybyś przerobił to na jQuery :) Dzięki!

komentarz 5 grudnia 2016 przez Olaf Siwiński Mądrala (7,060 p.)

$('.box').click(function() {
  if (!$('.toggle').hasClass('active')) return;
  $(this).addClass('activeBox');
  $('.box:not(.activeBox)').addClass('TwojaKlasaZCssDlaBoxowZLagodnymPrzejsciem');
})

Z jQuery to będzie wyglądać w ten sposób.

komentarz 5 grudnia 2016 przez ayo1001 Obywatel (1,890 p.)

Właśnie o takie coś mi chodziło!

Dodałem hover zamiast click.

Tylko niestety po aktywowaniu przycisku i najechaniu myszka na .box i potem na zjechaniu na inny nie aktywuje tego nowego, a tamtego nie dezaktywuje. Można też po ponownym kliknieciu na przycisk .toggle.active zrobić, żeby TwojaKlasaZCssDlaBoxowZLagodnymPrzejsciem usunęło?

komentarz 5 grudnia 2016 przez Olaf Siwiński Mądrala (7,060 p.)

$('.box').mouseenter(function() {
  if (!$('.toggle').hasClass('active')) return;
  $(this).addClass('activeBox');
  $('.box:not(.activeBox)').addClass('TwojaKlasaZCssDlaBoxowZLagodnymPrzejsciem');
});
$('.box').mouseleave(function() {
  if (!$('.toggle').hasClass('active')) return;
  $('.box').removeClass('activeBox TwojaKlasaZCssDlaBoxowZLagodnymPrzejsciem')
});

Zobacz czy to będzie działać

komentarz 5 grudnia 2016 przez ayo1001 Obywatel (1,890 p.)

Działa, działa :) , chyba jednak z kliknięciami będzie lepiej, bo niestety mam przerwy między tymi boxami i trochę animacje podczas przesuwania się w pustym tle szaleją.

1. $('.box').click(function()

a w 2. ?