Hey there! I need some assistance in completing this code snippet.
I have a div with overflow:hidden and a margin-left of 82px. Inside it, there is a share link and a ul list containing three external links.
When I hover over the share link, everything works fine - the div slides to the left back to margin-left: 0.
But I want the same behavior when I mouseout of the parent div, not just the share link. Currently, if I move my mouse over the ul list, the whole layout becomes unstable.
What I'm looking for is when a link is hovered over, the div will slide to the left, revealing three links which users can click on. And then, when the user moves away from the div, it collapses again.
Below is the jQuery code I've written so far:
$("#shareBtn").mouseover(function(){
var $marginLefty = $(this).parent();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 0 ? $marginLefty.outerWidth() : 0
});
}).mouseout(function(){
var $marginLefty = $(this).parent();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css('marginLeft'), 40) == 82 ? $marginLefty.outerWidth() : 82
});
});
And here's the corresponding HTML:
<div id="player">
<div id="share_feature">
<div>
<a id="shareBtn" href="#">share</a>
<ul id="player_social">
<li><a href="#">google</a></li>
<li><a href="#" >facebook</a></li>
<li><a href="#" >twitter</a></li>
</ul>
</div>
</div>
I would greatly appreciate any help you can provide. Thank you!