I'd like to have jQuery toggle the visibility of a div when the mouse is over the current <tr> and then toggle back to hidden when the mouse is no longer over it.

What I currently have is:

<tr onmouseover="$('#msgtxt1').show('fast');changeRow(this, true);" onmouseout="$('#msgtxt1').hide('fast');
changeRow(this, false);">
<td><a href="messages/view/6660/" onclick="jumpTo('messages/view/6660/');" style="display: block;">Re: Friend Invite from IceCube</a>
<div class="smallertext" style="display: none;" id="msgtxt1">Some text test..</div>
</td>
</tr>

But this is terribly flawed, because whenever I put the mouse over something in between the <tr> such as text or img, etc, it toggles back to hidden, then starts jiggling about crazily... Any suggestions?

Forget about all that. Use jQuery's hover function, along with the slideUp and slideDown methods. For one thing, you should put an ID on the <tr>, or have some way of identifying it.

$(document).ready(function() {
$("tr#unique").hover(function() {
     $("#msgtxt1").slideDown(400);
}, function() {
     $("#msgtxt1").slideUp(400);
});
});

In general, you should shy away from having inline behaviors. Just like CSS is kept in a seperate place, so should JavaScript events. Plus, if you're using jQuery, you should be taking advantage of its advanced event scheme.

What about for multiple TR's?

#tr1
#tr2
#tr3

Also within the tr1, tr2, etc, is tr1 = <div id="txtmsg1"> tr2 = <div id="txtmsg2"> etc that I want revealing.

It's dynamically generated with php while from mysql db.
Also what am I doing wrong here

var inprog = 0;
$(document).ready(function() {
if(inprog == 0) {
    $("tr#unique1).hover(function() {
     $("#msgtxt1).slideDown(400);
     inprog = 1;
}, function() {
     $("#msgtxt1).slideUp(400);
     inprog = 0;
});
}
});

Leave the ids on the <tr> and use a common class for the <div> nested within it. Put an ID on the table that contains the <tr>s.

$(document).ready(function() {
$("#mytableid tr").hover(function() {
     $("#" + this.id + " div.my-class").slideDown(400);
}, function() {
     $("#" + this.id + " div.my-class").slideUp(400);
});
});

Or, if it is the only <div> that is the child of the <tr> you could forget the class altogether, and just target it as $("#" + this.id + " div")

***EDIT***
btw, after a second glance at your code, I see you need to change the "inprog" variable as a callback to the slideUp/slideDown when hovering off, because the way you're doing it, it will be executed before the animation is complete. Also, you need to nest the if() inside the first hover function, not outside the event. So:

$(document).ready(function() {
    var inprog = 0;
        $("tr#unique1").hover(function() {
         if (inprog == 0) {
             inprog = 1;
             $("#msgtxt1").slideDown(400);
         }
    }, function() {
         $("#msgtxt1").slideUp(400, function() {inprog = 0;});
    });
});

Also, you dropped some quotation marks in your example, which made the code invalid.

You'll have to combine the two ideas I gave you, because on the second example, all I did was edit the code you gave. Note that I put the variable declaration "inprog" inside of the $(document).ready(), which I think is better, since it stays local to that namespace.

hey, I fixed a mistake on the second code example above. Take another look at it.