Slide to right using .animate () width
Question by Matt Jones
after reading all the questions related to this I still can’t seem to figure out how to make it work for me.
I’ve got a list of social icons that I would like to have slide from left to right when hovering over “Follow Me” and then slide back into hiding when hovered away.
Here is the current code in JSFIDDLE…
If you make the fix, can you point out where I made my mistakes? I’m still very new to this. Thanks so much!
Answer by Gary.S
This may not be exactly what you are looking for but is pretty close to what you are asking for. I have stopped using UL and LI’s for the icons and just used a div and spans, this can be changed back if required. The main issue is setting the width to a specific value (percent won’t work).
$('.social-top').hide();
$('#social-grid').mouseenter(function() {
$('.social-top').show();
$('.social-top').stop().animate({
width: 225
}, 1000);
});
$('#social-grid').mouseleave(function() {
$('.social-top').stop().animate({
width: 0
}, 1000, function() {
$('.social-top').hide();
});
});
This should get you most of the way there. I use show/hide to resolve an issue with 0 width and inline-block elements still being shown.
Example:
Answer by Starx
There are many logical flaws in your code:
- Initially you are hiding the container, therefore closing all possibilities of the event ever being triggered
- You selector itself is an li item and there is no child
<li>inside it. - And Increasing the
widthproperty of the element does not take it to left. You needleft,rightor evenpadding-leftormargin-left
Your syntactical mistake was, the properties to be animated and the time was inside the same curly braces. The correct syntax
$('element').animate(
{
//css properties
left: "50"
},
5000 //The time in milliseconds or `fast`, `slow`
);
Use this
$('.social-top li:not(.social-flyout)').hover(function() {
$('.social-top').animate({
right: 0
},"fast"
);
});
I also gave position: absolute to the .social-top. Here is a working Demo here
