javascript - jQuery 返回相同的不透明度

Question

我正在尝试使用带有 opacity css 属性的简单动画:

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

第一次，元素隐藏成功。但是当我第二次点击按钮时，$(this).css('opacity') 返回值 "1"。

在浏览器中调试清楚地表明 opacity 是 0。

有人可以解释这种行为吗？

Answer 1

您正在检查 this 的 opacity 并更改 #animationTarget 之一。

应该这样做:

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