Próbuję użyć prostej animacji z opacity CSS Nieruchomość:

$('#testAnimation').click(function (event) {
    if ($(this).css('opacity') == 0) {
        $('#animationTarget').animate({opacity: 1}, 'slow');
    } else {
        $('#animationTarget').animate({opacity: 0}, 'slow');
    }
});

Po raz pierwszy element jest pomyślnie ukryty. Ale kiedy kliknięcie przycisku drugi raz, $(this).css('opacity') zwraca wartość "1".

Debugowanie w przeglądarce wyraźnie mówi, że opacity jest 0.

Czy ktoś może wyjaśnić to zachowanie?

3
Andrii Abramov 26 czerwiec 2017, 10:25

4 odpowiedzi

Najlepsza odpowiedź

Sprawdzasz opacity this i zmieniając jedną z #animationTarget.

To powinno wystarczyć:

$('#testAnimation').click(function (event) {
  if ($('#animationTarget').css('opacity') == 0) {
    $('#animationTarget').animate({opacity: 1}, 'slow');
  } else {
    $('#animationTarget').animate({opacity: 0}, 'slow');
  }
});
3
Erazihel 26 czerwiec 2017, 07:30

Sprawdzanie $(this) W ramach obsługi zdarzeń Click można zapoznać się z elementem $('#testAnimation')

Zamiast tego powinieneś sprawdzić $('#animationTarget'), a także możesz zrefleksorować swój kod:

$('#testAnimation').on('click', function (event) {
    var $animationTarget = $('#animationTarget'),
        opacity = $animationTarget.css('opacity') == 0 ? 1 : 0;     
    $animationTarget.animate({opacity: opacity}, 'slow');
});
0
Andrii Abramov 26 czerwiec 2017, 11:52

Spróbuj użyć .fadeIn() i .fadeOut(), aby osiągnąć to, co robisz. Mniejszy kod do napisania. Spójrz na część :visible, ponieważ nie pamiętam, czy jest to poprawna składnia!

$('#testAnimation').click(function (event) {
  if ($(this).is(':visible') {
      $(this).fadeOut();
  } else {
      $(this).fadeIn();
  }
});
1
Fabrizio Mazzoni 26 czerwiec 2017, 10:39

To była moja wina.

Dla każdego, kto stoi w obliczu podobnego problemu, upewnij się, że sprawdzasz właściwość żądanego elementu:

if ($(this).css('opacity') == 0)

Powinien zostać zastąpiony:

if ($('#animationTarget').css('opacity') == 0)
1
Andrii Abramov 26 czerwiec 2017, 07:29