jquery animate height bouncing

Question 1

Question by g0dl3ss

i made a script that dynamically loads content into a div and whenever the content makes the div’s height bigger or smaller it animates the height to the actual height.

The problem is that it doesn’t only slide up/down it always slides a bit up and then down to the desired height.

I’d like to make it slide directly at the desired height without the “bouncing”.

Here’s part of the script:
main_content.html(html);

main_content.css("height", "auto");
var newContentHeight = main_content.height();
loader_div.hide();
main_content.height(prevContentHeight);
main_content.fadeIn("fast", function() {
    main_content.animate({
        "height": newContentHeight
        }, 300);
    });

The script works, the only problem is that the animation doesn’t slide the div up or down to the desired height, it always slides it a bit up and then down to the desired height.

Is it some kind of wanted animation when using animate height or is there something wrong?
Thanks

edit: console logging newContentHeight(the final height of the div) it looks like it gathers 2 heights, then the animate first goes to one of them and then to the other one that’s why it looks like bouncing. Working on it.

edit2: yes the problem is definitely there, i cleaned up all the code and everything works except that i get 2 attributes from newContentHeight using console.log it looks like the content div that is hidden has 2 heights and those 2 heights are passed to the .animate that’s why it first goes up and then down…
Kinda strange

Answer

Answer by g0dl3ss

g0dl3ss

Couldn’t solve the problem, i modified the script below and now everything works like it should.
http://css-tricks.com/dynamic-page-replacing-content/
It has the exact animation i was looking for(except for a couple of steps easily implementable).

Answer

Answer by Starx

Starx

I think the problem is not the script, but the system running the script. Replace the time to a bit slower

main_content.animate({
"height": newContentHeight
}, 3000);

Question 2

Question by Matt Jones

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

Answer by Gary.S

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

Answer by Starx

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 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

Tag: slide

jquery animate height bouncing

Question by g0dl3ss

Answer by g0dl3ss

Answer by Starx

Slide to right using .animate () width

Question by Matt Jones

Answer by Gary.S

Answer by Starx

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