I created a jQuery slide on hover effect for an element at the bottom of my page. The slider expands when the mouse hovers over it, and there's a tab that sticks out at the top to remind users of its functionality. However, I'm facing issues with this tab causing the element to repeatedly expand and contract when hovered over. I tried adjusting the CSS by removing margin-top, which temporarily fixed the issue but doesn't align with the original design intent. Adding a div also didn't resolve the problem. Can anyone provide insight on how to get the tab working correctly?
My setup uses JQuery 1.5.1
Below is the HTML:
<body>
<div class="Livwidget">
<div class="tab"></div>
</div>
</body>
Here is the CSS:
.Livwidget{
background: #000;
bottom: 0;
left: 0;
margin-left: 5%;
margin-right: 5%;
padding-top: 3px;
position: fixed;
width: 90%;
}
.tab{
background: #000;
height: 30px;
margin-left: 0;
margin-top: -30px;
width: 135px;
}
And here is the JS:
<script>
$(document).ready(function(){
$(".Livwidget").hover(makeTall,makeShort);
}); // close document.ready
function makeTall(){ $(this).animate({"height":250},350);}
function makeShort(){ $(this).animate({"height":5},350);}
</script>
Your assistance in resolving this issue would be greatly appreciated. Despite numerous attempts, I haven't been able to find a solution after hours of troubleshooting.