not the expected 'effect' when using jquery show/hide

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.

score 4 · Accepted Answer · edited Jun 12 '12 at 17:36

4

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/

edited Jun 12 '12 at 17:36

Zuul

16,217
6
61
88

answered Jun 12 '12 at 14:56

Niet the Dark Absol

320,036
81
464
592

that is perfect. just what I was looking for! It works perfectly in fiddle but for some reason I'm getting an error when inserting it into my own file? Uncaught SyntaxError: Unexpected token ILLEGAL for chrome dev tool. I have looked over and over but can't find this token it speaks of. – Pete Jodo Jun 12 '12 at 15:40
See http://stackoverflow.com/questions/4404526/unexpected-token-illegal-in-webkit – Niet the Dark Absol Jun 12 '12 at 15:41
haha of course. thanks! I couldn't even find the white space that was causing the error but I slowly just retyped it, testing step by step, and now it works. – Pete Jodo Jun 12 '12 at 15:53

score 1 · Answer 2 · answered Jun 12 '12 at 14:57

A couple things:

If you want to do a fadein/out this would be better:

$(document).ready(function(){
    $("div.item_container").hover(function() {
         $("div.item_body").fadeIn(500);
    }, function() {
         $("div.item_body").fadeOut(500);
    });

});

Also, you should probably float the div .item_body to the left..

Demo: http://jsfiddle.net/lucuma/XtXGR/33/

score 0 · Answer 3 · answered Jun 12 '12 at 14:53

0

How about using CSS3 transitions instead?

See this: http://jsfiddle.net/EVDj6/2/

answered Jun 12 '12 at 14:53

Alex Chamberlain

4,147
2
22
49

wirey00 · Answer 4 · 2012-06-12T15:00:22.090

0

Something like this? Using slide will give you the slide from default left effect.

$(document).ready(function(){
    $("div.item_container").on('hover',function(){
        $("div.item_body").toggle('slide',500);
    });
});

http://jsfiddle.net/XtXGR/25/

edited Jun 12 '12 at 15:00

answered Jun 12 '12 at 14:54

wirey00

33,517
7
54
65

score 0 · Answer 5 · answered Jun 12 '12 at 15:02

There were many issues in your code. The href's were invalid and the floating of the elements was not 100% correct. One of the main issues was that you had display:none in your CSS. Bring that dispay:none out and of the CSS and put it inline on the item you want to show/hide. When its default state is "hide" then you need to bring the display:none inline.

Look at this fiddle to get a better idea of how to go about this with a bit more valid syntax: http://jsfiddle.net/fH3EC/1/

score 0 · Answer 6 · answered Jun 12 '12 at 15:03

0

I made something fast, you can go crazy with it :) The animation is pretty smooth, I hope it's useful for you.

http://jsfiddle.net/XtXGR/50/

answered Jun 12 '12 at 15:03

Axente Paul

553
2
8

not the expected 'effect' when using jquery show/hide

6 Answers6