I am encountering an issue with how my .animation is functioning with JQuery.
There is an image containing showthis() and hidethis() functions:
function hidethis() {
$('#info1').animate({
bottom: '-150px',
}, 100);
}
function showthis() {
$('#info1').animate({
bottom: '0px',
}, 500);
}
The components include an image on the page and a div with position: fixed; overlaying the image acting as a show/hide information tab.
Below are the styles for each element:
.slide img {
position: absolute;
top: 0px;
left: 0px;
}
.info {
position: fixed;
bottom: -150px;
left: 0px;
width: 527px;
height: 100px;
background-color: white;
padding: 15px;
opacity:0.9;
}
JQuery is triggered by onmouse events within the image:
onmouseover="javascript:showthis();" onmouseout="javascript:hidethis();"The challenge:
The floating div above the image (appearing whenever the visitor hovers their mouse over the image) is conflicting with the onmouseout event on the image. When hovering over the image, the div shows up. However, if I hover over the div while still hovering over the image, the div hides and the animation starts repeatedly toggling while I continue moving my mouse where the div appears. How can this be resolved?