Question

I’m having an unexpected effect and some other bugs when trying to use show/hide with mouseover and mouseout.

What I was trying to do is have a box (div) and when you would mouse over it, another box would appear and slide to the right.

Here’s the fiddle for it
http://jsfiddle.net/XtXGR/

Now there’s two problems with it. One is the flickering and the other is that it appears by growing from the top-left corner and what I want it to do is appear from the left.

Any help would be greatly be appreciated. Thanks

I think I know what causes the flickering from the similar questions but I still need help with the other issue. Thanks!

Oh also just so you know the context in which this will be used is on a page with a table of items and each item would be the object in the fiddle link I posted above.

Answer 1

The main issue is that moving over a different child element of the container will trigger a mouseout and mouseover combination, which is why you see the element expanding and collapsing. IE circumvented this with the mouseenter and mouseleave events, which act exactly like the CSS :hover.

Speaking of which, the jQuery hover function has this feature too. You should use that instead of mouseover and mouseout.

According to the show API, you should use the slide effect to get what you want.

Your final code should look like this: http://jsfiddle.net/XtXGR/28/