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

好吧，这是我的错。

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

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

应替换为：

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

Answer 2

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

应该这样做：

$('#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();
  }
});