<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('div').hover(function() {
        $('p').animate({
            height: 'toggle',
            opacity: "toggle"
        }, {
            queue: false,
            duration: 500
        });
    });
});
</script>
<style type="text/css">
p {
    background: red;
    width: 100px;
    height: 100px;
}
</style>

<div>text</div>
<p style="display: none;"></p>

And this bug (can't stop event when fast pointing to an element):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('div').hover(function(event) {
        $('p')[event.type == 'mouseenter' ? 'show' : 'hide'](100);
    });
});
</script>
<style type="text/css">
p {
    background: red;
    width: 100px;
    height: 100px;
}
</style>

<div>text</div>
<p style="display: none;"></p>

please see it here: http://jsfiddle.net/uw8yU/2/ and http://jsfiddle.net/uw8yU/1/