[jQuery] bind eventhandler after animation finished

[maggus.st...@googlemail.com]

hi everyone,

what i want to accomplish in general:
i have a text field which has a filename as the value.
when hovering the field, a div should slide in from the bottom of the
field and show a preview of this image.
currently i'm using the following jquery-code:

  function rexShowMediaPreview() {
    var value;
    if($(this).hasClass("rex-widget-media"))
      value = $("input[type=text]", this).val();
    else
      value = $("select", this).val();

    var div = $(".rex-media-preview", this);
    var url = '../index.php?rex_resize=246a__'+ value;
    if(value && value.length != 0 &&
      (
        value.substr(-3) == "png" ||
        value.substr(-3) == "gif" ||
        value.substr(-3) == "bmp" ||
        value.substr(-3) == "jpg" ||
        value.substr(-4) == "jpeg")
      )
    {
      div.html('<img src="'+ url +'" />');
      div.slideDown("slow");
    }
    else
    {
      div.slideUp("slow");
    }
  };

  $(".rex-widget-media.rex-widget-preview, .rex-widget-medialist.rex-
widget-preview")
    .bind("mouseenter", rexShowMediaPreview)
    .bind("mouseleave", function() {
            var div = $(".rex-media-preview", this);
            div.slideUp("slow");
  });


the markup looks like the following:

    <div class="rex-widget">
      <div class="rex-widget-media rex-widget-preview">
        <p class="rex-widget-field">
          <input type="text" size="30" name="MEDIA[2]"
value="myimg.jpg" id="REX_MEDIA_2" readonly="readonly" />
        </p>
        <div class="rex-media-preview"></div>
      </div>
    </div>


this doesn't work well...
(when leaving the div while sliding in, the div immediatly slides
out...)

is someony able to give me a hint...? i suppose it would be much
better if the mouseleave eventhandler would be bound when the slide in
animation finished (while unbinding the mouseenter handler) and the
same while sliding out vice versa...

any ideas?