jQuery returns 不透明度相同

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') returns 值 "1".

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

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

Answer 1

好吧，这是我的错。

对于遇到类似问题的任何人，请确保您正在检查所需元素的属性：

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

应替换为：

if ($('#animationTarget').css('opacity') == 0)

Answer 2

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

应该这样做：

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

Answer 3

在您的点击事件处理程序中检查 $(this) 您将引用元素 $('#testAnimation')

相反，您应该检查 $('#animationTarget')，您也可以像这样重构您的代码：

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

Answer 4

尝试使用 .fadeIn() 和 .fadeOut() 来实现您正在做的事情。编写的代码更少。看看 :visible 部分，因为我不记得它是否是正确的语法！

$('#testAnimation').click(function (event) {
  if ($(this).is(':visible') {
      $(this).fadeOut();
  } else {
      $(this).fadeIn();
  }
});

jQuery returns 不透明度相同

jQuery returns the same opacity

javascript

css

jquery

opacity