Q:

jQuery returns the same opacity

I am trying to use simple animation with opacity css property:
$('#testAnimation').click(function (event) {
    if ($(this).css('opacity') == 0) {
        $('#animationTarget').animate({opacity: 1}, 'slow');
    } else {
        $('#animationTarget').animate({opacity: 0}, 'slow');
    }
});

The first time, element is successfully hidden. But when I click button second time, $(this).css('opacity') returns value "1".
Debugging in browser clearly says that opacity is 0.
Can someone explain this behavior?

A:

You are checking the opacity of this and changing the one of the #animationTarget.
This should do it:
$('#testAnimation').click(function (event) {
  if ($('#animationTarget').css('opacity') == 0) {
    $('#animationTarget').animate({opacity: 1}, 'slow');
  } else {
    $('#animationTarget').animate({opacity: 0}, 'slow');
  }
});

