jQuery: Unable to fade out a previously faded in element

问题

I want to show a notification at the top – for 2 seconds – telling me which version of jQuery & jQuery UI was loaded. Unfortunately, I can't seem to be able to hide it later.

My code

$('<div>jQuery v' + jQuery.fn.jquery + ' and jQuery UI v' +  jQuery.ui.version + ' loaded.</div>')
.addClass('ui-state-highlight').prependTo('body').hide(0, function() {
  $(this).fadeIn(500, function() {
    setTimeout(function() {
      $(this).fadeOut(500, function() {
        $(this).remove();
      });
    }, 2000);
  });
});

jQuery Lint says I'm doing something wrong – which is true –, but I don't know how to do it the right way.

回答1:

It is probably a scope problem. Try:

  $(this).fadeIn(500, function() {
    var parentContext = $(this);
    setTimeout(function() {
      parentContext.fadeOut(500, function() {
        $(this).remove();
      });
    }, 2000);
  });

来源：https://stackoverflow.com/questions/4479247/jquery-unable-to-fade-out-a-previously-faded-in-element