javascript - How to animate parent height auto when children height is modified - Stack Overflow

admin管理员组

文章数量:1410674

I have a parent div with height set to auto.

Now whenever I fade something in that's a child of that div, the height just jumps to the new height. I want this to be a smooth transition.

The height is supposed to transition before any children are being displayed, and also transition after any children are being removed (display: none;).

I know this is possible when you know the predefined heights, but I have no idea how I can achieve this with the height being set to auto.

JSFiddle Demo

I have a parent div with height set to auto.

Now whenever I fade something in that's a child of that div, the height just jumps to the new height. I want this to be a smooth transition.

The height is supposed to transition before any children are being displayed, and also transition after any children are being removed (display: none;).

I know this is possible when you know the predefined heights, but I have no idea how I can achieve this with the height being set to auto.

JSFiddle Demo

• javascript
• jquery
• html
• css
• xhtml

Share Improve this question Follow edited Mar 5, 2014 at 8:24 Kid Diamond asked Mar 4, 2014 at 12:57 Kid DiamondKid Diamond 2,30188 gold badges4040 silver badges8585 bronze badges 3

• Do the possible child elements of your parent DIV have known heights, or is their height given by their content? And is there always only one child visible at the time or several? – Netsurfer Commented Mar 7, 2014 at 0:57
• The possible child elements have no known heights. The height is indeed given by their content. And yes, there is always one child visible at least. – Kid Diamond Commented Mar 7, 2014 at 16:44
• OK, so you have to determine the height of the appropriate child before you may transition the height of the parent. How about an alternative approach: Set the parent height to zero and transition its height with the child already visible? Would be much easier and imho the "nicer" effect. – Netsurfer Commented Mar 7, 2014 at 16:49

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1 +50

You could load new content with display: none and slideDown() it in and then fadeIn with animated opacity. Before you remove it you just fade out and slideUp()

I think this is what you wanted: jsFiddle

$(function() {
    $("#foo").click(function() {
        if($("#bar").is(":visible")) {
            $("#bar").animate({"opacity": 0}, function() {
                $(this).slideUp();
            });
        }
        else {
            $("#bar").css({
                "display": "none",
                "opacity": 0,
                /* The next two rows are just to get differing content */
                "height": 200 * Math.random() + 50,
                "background": "rgb(" + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")"
            });
            $("#bar").slideDown(function() {
                $(this).animate({"opacity": 1});
            });
        }
    });
});

Try this also: jsFiddle. Click "Click me" to add new divs. Click on a new div to remove it.

$(function() {
    $("#foo").click(function() {
        var newCont = $("<div>").css({
            "display": "none",
            "opacity": 0,
            "height": 200 * Math.random(),
            "background": "rgb(" + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")"
        });
        $(this).append(newCont);
        newCont.slideDown(function() {
            $(this).animate({"opacity": 1});
        });
        newCont.click(function(e) {
            $(this).animate({"opacity": 0}, function() {
                $(this).slideUp(function() {
                    $(this).remove();
                });
            });
            return false;
        });
    });
});

The approach I took was to see if .bar was visible, and if so fade it out, the animate the height of #foo back to where it started, or animating it to the height of .bar + #foo otherwise, using callbacks in both cases to get the effect that you were looking for.

Code:

$(function() {
    var start_height = $('#foo').outerHeight();
    $("#foo").click(function() {
        $bar = $('.bar');
        $foo = $(this);
        if($bar.is(':visible')) {
            $bar.fadeToggle('slow', function() {
                $foo.animate({height: start_height});
            });
        } else {
            $foo.animate({height: ($bar.outerHeight()+start_height)+'px'}, 'slow', function() {
                $bar.fadeToggle();
            });
        }
    });
});

Fiddle.

EDIT:

Added .stop() to prevent unexpected behavior when double clicked.

Updated Fiddle.

Try to use developer tools in browsers.

All browser have nowadays it. (ctrl shift i)

If u look at page source code after fadeOut executed, u will see inline style "display:none" for inner element. This means that your inner element has no height any more, that is why outer(parent) element collapsed (height =0);

It is a feature of all browsers, that block elements take height as they need unless u will not override it. so since there are no elements inside with height more than 0 px that height of parent will be 0px;

y can override it using css style

height: 300px  
or
min-height: 300px;

This is correct if u use jquery

Try this fix :)

 $(function() {
    var height =  $("#foo").height();
    $("#foo").click(function() {  
     var dis =   $(".bar").css('display');

     if(dis == 'none'){
      $(this).animate({height:height+$(".bar").height()},2000,function(){
      $(".bar").show();
       });
     } 
      else{
        $(".bar").hide();
        $(this).animate({height:height-$(".bar").height()},2000);
       }

    });
});

#foo {
    height: auto;
    background: #333;
    color: white;
    min-height: 20px;
}

本文标签： javascriptHow to animate parent height auto when children height is modifiedStack Overflow