CODEWITHSUNDEEP
jqueryjquery-animateslide
Matt Jones
Matt Jones

Reputation: 25

Slide to right using .animate () width

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!

Upvotes: 1

Views: 14151

Answers (2)

Gary.S
Gary.S

Reputation: 7131

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/

Upvotes: 3

Starx
Starx

Reputation: 79049

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

Upvotes: 0

Related Questions