JQuery Animation Issues - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

JQuery Animation Issues

Doesn't like mouseover/mouseout events

bsbarker

10:20 am on Jul 12, 2010 (gmt 0)

10+ Year Member

I'm using the following jquery animations to move an image up (onmouseover) and reveal the contents behind it in the <div>, and then move it back down (onmouseout) to cover the contents again.

Here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>

.listYourBusiness {
position: absolute;
top: 315px;
right: 25px;
width: 250px;
height: 170px;
text-align: left;
background: #eeeeee;
}
.listYourBusinessImage {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
height: 170px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".listYourBusiness").mouseover(function(){
$(".listYourBusinessImage").animate({top:-170},"300");
});
$(".listYourBusiness").mouseout(function(){
$(".listYourBusinessImage").animate({top:0},"300");
});
});
</script>

</head>
<body>

<div class="listYourBusiness">
<h4>Header</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<a href="">Link</a>
<img class="listYourBusinessImage" src="images/list_your_business.png" alt="" />
</div>

</body>
</html>

The animations are working fine. However, all mouse movement while still hovering over <div class="listYourBusiness"> registers as a bunch of tiny mouseover/mouseout events, causing the image to move up and down several times while hovering over the <div>.

Any ideas how I can correct this so the image will move up and stay there the entire time the cursor is hovering over the <div>?

daveVk

2:14 am on Jul 13, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Moving the image may cause the div to resize, try putting image after the div or putting fixed size on div.

bsbarker

3:20 am on Jul 13, 2010 (gmt 0)

10+ Year Member

daveVk -

Thanks for the suggestions. I just tried putting the image after the div like you suggested, but it covered the div so the mouseover event was blocked. I already have a fixed size on the div, so that's not the issue.

It turns out that it's when I mouseover and mouseout of each (h4, ul, li, a) element within the div that the multiple mouseover/mouseout events are triggered. So I came up with a (messy) workaround. I placed another div within the original div, filled it with  's and gave it a z-index to move it to the front of the pack. That made it so the cursor wasn't moving from element to element while hovering over the div, so it solved that problem. However, my link within the div is now blocked, so I had to anchor the entire div instead of just the text of the link. That's not ideal, but it'll work in this case.

This is definitely not my favorite solution, so if you (or anyone) have some cleaner ideas then I'd be open to them. If not, I'll survive as is. Thanks again for the input you already gave.

daveVk

4:55 am on Jul 13, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You may be able to filter events by event.target ?

try

$(".listYourBusiness").mouseover(function(event){
if(event.target===this){$(".listYourBusinessImage").animate({top:-170},"300");}
});

bsbarker

12:07 am on Jul 19, 2010 (gmt 0)

10+ Year Member

Thanks, daveVk, but still no luck. Event.target was a good thought but I can't get it to work. It's still re-triggering the mouseover/mouseout events every time the cursor moves on or off of each element inside the div. I tried modifying your event.target suggestion several different ways, but to no avail.

I'd like to use this same slide animation effect to reveal a form in the div underneath, so my previous solution will not work because I can't focus on the input fields with the second div on top of them.

I tried placing class="listYourBusiness" in all elements as well, hoping that might fool the browser into thinking it wasn't actually moving from the current element to a new one; but that was a dead end.

Does anyone have anymore ideas I can try?

daveVk

4:58 am on Jul 19, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

[api.jquery.com...]

From above the following may be useful

event.currentTarget

event.stopPropagation()

Perhaps if currentTarget not the div stopPropagation ?

httpwebwitch

1:02 pm on Jul 19, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Here's how you can fix the problem in 2 seconds

$(document).ready(function(){
$(".listYourBusiness").mouseenter(function(){
$(".listYourBusinessImage").animate({top:-170},"300");
});
$(".listYourBusiness").mouseleave(function(){
$(".listYourBusinessImage").animate({top:0},"300");
});
});

Instead of mouseover and mouseout, use the events mouseenter and mouseleave.

Proprietary only to Internet Explorer, now every modern JS library, JQuery included, defines these as custom events to handle exactly the behaviour you want, in all browsers.

If you were using core JavaScript you'd have to wrestle with propagation and bubbling, reading the currentTarget and traversing the DOM to selectively react to parent-child mouseover relationships... (see [webmasterworld.com...] showing a classic solution by PPK and my improvements to it)

Since you're using JQuery, you can use mouseenter and mouseleave. MooTools has the same events in its menagerie.

[api.jquery.com...]
[api.jquery.com...]

Happy Monday!

bsbarker

11:54 pm on Jul 19, 2010 (gmt 0)

10+ Year Member

Happy Monday indeed! mouseenter/leave works like a charm, thanks a ton! I was wondering why there wasn't a streamlined way to fix this, so I'm thrilled to find out that there is.

dave, thanks again for your efforts. I appreciate your suggestions!

Here's a million bucks for each of you.

$1,000,000
$1,000,000

All the best :)

Shinya

4:19 am on Jul 20, 2010 (gmt 0)

10+ Year Member

you can also use hoverIntent plugin to do this.

[cherne.net...]

bsbarker

8:35 am on Jul 20, 2010 (gmt 0)

10+ Year Member

Shinya, you just saw that I was giving away $1,000,000 and wanted to get your piece. ;)

Just kidding, welcome to the forum!

hoverIntent looks interesting! I don't think it's right for my current project because I'd like the effect to be instant, but I think it's a great idea for dropdown menus that use horizontal dropdowns instead of vertical ones. I have bookmarked it for future use. Thanks for the tip!