Animate dynamic div height?

JavaScript
1

For the menu page of a restaurant website I need an animate function that will adjust the height from a div (in animation) depending on the content (dynamic from database). I use the following function to switch between content:


 $(".menu").on("click", "a", function(e) {
   e.preventDefault();
  $(".content").load(this.href); 	
});

and for the links


<ul>
    <li><a href="modules/site/menu.php?category_id=1&amp;group_id=1">Soup</a></li>
    <li><a href="modules/site/menu.php?category_id=1&amp;group_id=2">Soup</a></li>
</ul>

.
After some googling I found a few solutions but non of them is working. This is the last thing I tried:


[B]I changed:[/B]

[COLOR="#FF0000"]$(".kaart").load(this.href); [/COLOR]

[B]into[/B]

[COLOR="#FF0000"]$(".kaart").load(this.href, function(res){
    function setContainerHeight() {
        newHeight = $('.content').height();
        $(".content").animate({
            height: newHeight
        }, 500  );
    }			
});[/COLOR]

ut that isn’t doing the trick. I don’t get an error but div content won’t animate, it simply just snaps to the new size . How should I adjust the function so the animate function will work.?

Thank you in advance!

2

How about something like this.


<div class="wrap">
		<ul class="menu">
				<li><a href="content1.htm">Load content 1</a></li>
				<li><a href="content2.htm">Load content 2</a></li>
				<li><a href="content3.htm">Load content 3</a></li>
				<li><a href="content4.htm">Load content 4</a></li>
		</ul>
		<div class="content">
				<div class="inner"></div>
		</div>
</div>




$(".menu").on("click", "a", function (e) {
    var $targetDiv = $('.content');
    var $targetDiv2 = $('.inner');
    $targetDiv.css('height', $targetDiv.height())
    $targetDiv2.load(this.href, function () {
        var newheight = $targetDiv2.height();
        $targetDiv.animate({
            height: newheight
        }, 500, "linear", function () {
            $targetDiv.css({
                height: 'auto'
            });
        });
    });
    e.preventDefault();
});

It could probably do with tidying up as its a little jumpy.:slight_smile:

3

Hi Paul. This is indeed where I’m after. Only the animation is not running not very smooth. I tried it with adjusting the ms but without the desired result as you can see here! What should I adjust to make the animation run more smooth

4

Hi,

Remove the CSS animation form content and menubar as they are fighting with the js and then set .inner to be width:100% and float:left and see if that makes it smoother.

demo here.

(I added a fade to it also in the js.)

5

Hi Paul. That works like a charm :slight_smile: Thank you so much :tup: