March 12, 2012

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:

http://jsfiddle.net/infiniteloops/NqrKK/13/

Answer by Starx

There are many logical flaws in your code:

  1. Initially you are hiding the container, therefore closing all possibilities of the event ever being triggered
  2. You selector itself is an li item and there is no child <li> inside it.
  3. And Increasing the width property of the element does not take it to left. You need left, right or even padding-left or margin-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

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!