Passing $(this) to jQuery fadeOut callback

Question

I know I need to use a callback so that html() doesn't happen until after fadeOut(), but inside the fadeOut() callback I don't have access to $(this) from .hover.

I tried passing the selection using var point, but it's not working.

if(!$.browser.msie) {
 points = $("div.point");
} else {
 points = $("div.flash");
}

Problem Area:

$(points).hover(
     function () {
      var point = $(this);

      $('#features_key').fadeOut('normal', function(point) {
       $('#features_key').html(point.next('.info').clone()).fadeIn('normal');
      });
     }, 
     function () {
     }
    );

HTML:

<div class="feature" id="feature0">
 <div class="point"></div>
 <div class="info"><p>Roof System</p></div>
</div>

Answer 1

Don't use point as a parameter to your callback for fadeOut. It will hide the point variable you "captured" earlier:

$(points).hover(
    function () {
            var point = $(this);

            $('#features_key').fadeOut('normal', function() {
                    $('#features_key').html(point.next('.info').clone()).fadeIn('normal');
            });
    }, 
    function () {
    }
);

Answer 2

by putting point as a parameter in the callback function, you are resetting it's value inside that function.