So animieren Sie die Höhe der übergeordneten Höhe, wenn die Kinderhöhe geändert wird

Question

Ich habe ein Elternteil div mit der Höhe auto.

Jetzt, wenn ich verblasse etwas in das ist ein Kind dieser div, springt die Höhe nur auf die neue Höhe. Ich möchte, dass dies ein reibungsloser Übergang ist.

Die Höhe soll vor Kinder den Übergang angezeigt werden, und Übergangs auch nach Kinder entfernt werden (display: none;).

Ich weiß, das ist möglich, wenn Sie die vordefinierten Höhen weiß, aber ich habe keine Ahnung, wie ich das mit der Höhe zu auto eingestellt wird erreichen können.

JSFiddle Demo

Answer 1

könnten Sie neue Inhalte laden mit display: none und slideDown() drin und dann mit animierten Opazität FadeIn.Bevor Sie es entfernen verblassen Sie gerade aus und slideUp()

ich denke, das ist das, was man wollte: 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}); 
      }); 
     } 
    }); 
}); 

dies auch versuchen: jsFiddle. Klicken Sie auf "Click me", um neue divs hinzuzufügen. Klicke auf ein neues Div, um es zu entfernen.

$(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; 
     }); 
    }); 
}); 

Answer 2

Try-Entwickler-Tools in Browser zu verwenden.

Alle Browser haben es heutzutage. (ctrl shift i)

Wenn Sie sich den Seitenquellcode ansehen, nachdem fadeOut ausgeführt wurde, sehen Sie den Inline-Stil "display: none" für das innere Element. Dies bedeutet, dass Ihr inneres Element keine Höhe mehr hat, deshalb ist das äußere Element (Elternelement) kollabiert (Höhe = 0);

Es ist eine Eigenschaft aller Browser, dass Blockelemente die Höhe nehmen, wie sie brauchen, es sei denn, Sie werden sie nicht überschreiben. Da es keine Elemente mit einer Höhe von mehr als 0 px gibt, beträgt die Höhe des übergeordneten Elements 0px.

y außer Kraft setzen kann CSS-Stil

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

Verwendung Dies ist korrekt, wenn u jquery

Answer 3

Versuchen Sie dieses Update verwenden :)

$(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; 
} 

Answer 4

Der Ansatz ich war zu sehen, ob .bar war sichtbar, und wenn es so ausgeblendet ist, animiere die Höhe von #foo zurück dorthin, wo es angefangen hat, oder animiere es auf die Höhe von .bar + #foo Andernfalls verwenden Sie in beiden Fällen Rückrufe, um den von Ihnen gewünschten Effekt zu erhalten.

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:

hinzugefügt .stop() unerwartetes Verhalten zu verhindern, wenn doppelt geklickt.

Updated Fiddle.