webentwicklung-frage-antwort-db.com.de

Animieren Sie das Element mit jQuery auf die automatische Höhe

Ich möchte einen <div> Von 200px Auf auto Höhe animieren. Ich kann es anscheinend nicht zum Laufen bringen. Weiß jemand wie?

Hier ist der Code:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});
166
Daniel
  1. Speichern Sie die aktuelle Höhe:

    var curHeight = $('#first').height();
    
  2. Schalte die Höhe vorübergehend auf Auto:

    $('#first').css('height', 'auto');
    
  3. Holen Sie sich die automatische Höhe:

    var autoHeight = $('#first').height();
    
  4. Wechseln Sie zurück zu curHeight und animieren Sie zu autoHeight:

    $('#first').height(curHeight).animate({height: autoHeight}, 1000);
    

Und zusammen:

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);
246
David Tang

IMO ist dies die sauberste und einfachste Lösung:

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );

Erläuterung: Das DOM weiß bereits beim ersten Rendern, welche Größe das erweiterte Div hat, wenn es auf die automatische Höhe eingestellt ist. Diese Eigenschaft wird im DOM-Knoten als scrollHeight gespeichert. Wir müssen nur das DOM-Element aus dem jQuery-Element abrufen, indem wir get(0) aufrufen, und dann können wir auf die Eigenschaft zugreifen.

Das Hinzufügen einer Rückruffunktion zum Einstellen der Höhe auf "Automatisch" ermöglicht eine schnellere Reaktion, sobald die Animation abgeschlossen ist (credit chris-williams ):

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});
184
Liquinaut

Dies ist im Grunde derselbe Ansatz wie die Antwort von Box9, aber ich habe ihn in ein Nizza -JQuery-Plugin eingepackt, das übernimmt Die gleichen Argumente wie bei einem regulären Animate , wenn Sie mehr animierte Parameter benötigen und es müde werden, denselben Code immer wieder zu wiederholen:

;(function($)
{
  $.fn.animateToAutoHeight = function(){
  var curHeight = this.css('height'),
      height = this.css('height','auto').height(),
      duration = 200,
      easing = 'swing',
      callback = $.noop,
      parameters = { height: height };
  this.css('height', curHeight);
  for (var i in arguments) {
    switch (typeof arguments[i]) {
      case 'object':
        parameters = arguments[i];
        parameters.height = height;
        break;
      case 'string':
        if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
        else easing = arguments[i];
        break;
      case 'number': duration = arguments[i]; break;
      case 'function': callback = arguments[i]; break;
    }
  }
  this.animate(parameters, duration, easing, function() {
    $(this).css('height', 'auto');
    callback.call(this, arguments);
  });
  return this;
  }
})(jQuery);

edit: jetzt verkettbar und sauberer

24
w0ps

Eine bessere Lösung würde sich nicht darauf verlassen, dass JS die Höhe Ihres Elements festlegt. Die folgende Lösung animiert ein Element mit fester Höhe auf volle ("automatische") Höhe:

var $selector = $('div');
    $selector
        .data('oHeight',$selector.height())
        .css('height','auto')
        .data('nHeight',$selector.height())
        .height($selector.data('oHeight'))
        .animate({height: $selector.data('nHeight')},400);

https://Gist.github.com/202315

23
Tim Hettler

das funktioniert und ist einfacher als Lösungen vorher:

CSS:

#container{
  height:143px;  
}

.max{
  height: auto;
  min-height: 143px;
}

JS:

$(document).ready(function() {
    $("#container").click(function() {      
        if($(this).hasClass("max")) {
            $(this).removeClass("max");
        } else {
            $(this).addClass("max");
        }

    })
});

Hinweis: Für diese Lösung ist die jQuery-Benutzeroberfläche erforderlich

11
czLukasss
var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);
8

Sie können die untergeordneten Elemente von #first jederzeit umbrechen und die Höhe der Umhüllung als Variable speichern. Dies ist vielleicht nicht die schönste oder effizienteste Antwort, aber es ist der Trick.

Hier ist ein Geige wo ich einen Reset eingefügt habe.

aber für deine zwecke, hier ist das fleisch & kartoffeln:

$(function(){
//wrap everything inside #first
$('#first').children().wrapAll('<div class="wrapper"></div>');
//get the height of the wrapper 
var expandedHeight = $('.wrapper').height();
//get the height of first (set to 200px however you choose)
var collapsedHeight = $('#first').height();
//when you click the element of your choice (a button in my case) #first will animate to height auto
$('button').click(function(){
    $("#first").animate({
        height: expandedHeight            
    })
});
});​
7
Usha

Ich habe es geschafft, es zu beheben: Hier ist der Code.

var divh = document.getElementById('first').offsetHeight;
$("#first").css('height', '100px');
$("div:first").click(function() {
  $("#first").animate({
    height: divh
  }, 1000);
});
5
Daniel

Verwenden Sie slideDown und slideUp

$("div:first").click(function(){ $("#first").slideDown(1000); });
5
Ronny Sherer

Grundsätzlich steht Ihnen das Höhen-Auto erst zur Verfügung, nachdem das Element gerendert wurde. Wenn Sie eine feste Höhe festlegen oder wenn Ihr Element nicht angezeigt wird, können Sie nicht ohne Tricks darauf zugreifen.

Zum Glück gibt es einige Tricks, die Sie verwenden können.

Klonen Sie das Element, zeigen Sie es außerhalb der Ansicht an und geben Sie ihm die Höhe auto. Sie können es aus dem Klon nehmen und später für das Hauptelement verwenden. Ich benutze diese Funktion und scheint gut zu funktionieren.

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;

    return this.each(function(i, el){
        el = jQuery(el), elem =    el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();

        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });   
}

SAGE:

$(".animateHeight").bind("click", function(e){
    $(".test").animateAuto("height", 1000); 
});

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000);  
});

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000); 
});
4
Stan George

Sie können festlegen, dass Liquinauts Antwort auf Änderungen der Fenstergröße reagiert, indem Sie einen Rückruf hinzufügen, der die Höhe auf "Automatisch" zurücksetzt.

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000, function() {$("#first").css({height: "auto"});});
3
Cyl

das kannst du immer machen:

jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
    el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
    height = elem.css("height"),
    width = elem.css("width"),
    elem.remove();

    if(prop === "height")
        el.animate({"height":height}, speed, callback);
    else if(prop === "width")
        el.animate({"width":width}, speed, callback);  
    else if(prop === "both")
        el.animate({"width":width,"height":height}, speed, callback);
});  
}

hier ist eine Geige: http://jsfiddle.net/Zuriel/faE9w/2/

3
Zuriel

Probier diese ,

var height;
$(document).ready(function(){
    $('#first').css('height','auto');
    height = $('#first').height();
    $('#first').css('height','200px');
})

 $("div:first").click(function(){
  $("#first").animate({
    height: height
  }, 1000 );
});
2
Prakash

Hier ist eine, die mit BORDER-BOX funktioniert ...

Hallo Leute. Hier ist ein jQuery-Plugin, das ich geschrieben habe, um dasselbe zu tun, aber auch um die Höhenunterschiede zu berücksichtigen, die auftreten werden, wenn Sie box-sizing einstellen border-box.

Ich habe auch ein "yShrinkOut" -Plugin eingefügt, das das Element verbirgt, indem es entlang der y-Achse verkleinert wird.


// -------------------------------------------------------------------
// Function to show an object by allowing it to grow to the given height value.
// -------------------------------------------------------------------
$.fn.yGrowIn = function (growTo, duration, whenComplete) {

    var f = whenComplete || function () { }, // default function is empty
        obj = this,
        h = growTo || 'calc', // default is to calculate height
        bbox = (obj.css('box-sizing') == 'border-box'), // check box-sizing
        d = duration || 200; // default duration is 200 ms

    obj.css('height', '0px').removeClass('hidden invisible');
    var padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop), // get the starting padding-top
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom), // get the starting padding-bottom
        padLeft = 0 + parseInt(getComputedStyle(obj[0], null).paddingLeft), // get the starting padding-left
        padRight = 0 + parseInt(getComputedStyle(obj[0], null).paddingRight); // get the starting padding-right
    obj.css('padding-top', '0px').css('padding-bottom', '0px'); // Set the padding to 0;

    // If no height was given, then calculate what the height should be.
    if(h=='calc'){ 
        var p = obj.css('position'); // get the starting object "position" style. 
        obj.css('opacity', '0'); // Set the opacity to 0 so the next actions aren't seen.
        var cssW = obj.css('width') || 'auto'; // get the CSS width if it exists.
        var w = parseInt(getComputedStyle(obj[0], null).width || 0) // calculate the computed inner-width with regard to box-sizing.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderRightWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderLeftWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? (padLeft + padRight) : 0); // remove these values if using border-box.
        obj.css('position', 'fixed'); // remove the object from the flow of the document.
        obj.css('width', w); // make sure the width remains the same. This prevents content from throwing off the height.
        obj.css('height', 'auto'); // set the height to auto for calculation.
        h = parseInt(0); // calculate the auto-height
        h += obj[0].clientHeight // calculate the computed height with regard to box-sizing.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderTopWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderBottomWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? (padTop + padBottom) : 0); // add these values if using border-box.
        obj.css('height', '0px').css('position', p).css('opacity','1'); // reset the height, position, and opacity.
    };

    // animate the box. 
    //  Note: the actual duration of the animation will change depending on the box-sizing.
    //      e.g., the duration will be shorter when using padding and borders in box-sizing because
    //      the animation thread is growing (or shrinking) all three components simultaneously.
    //      This can be avoided by retrieving the calculated "duration per pixel" based on the box-sizing type,
    //      but it really isn't worth the effort.
    obj.animate({ 'height': h, 'padding-top': padTop, 'padding-bottom': padBottom }, d, 'linear', (f)());
};

// -------------------------------------------------------------------
// Function to hide an object by shrinking its height to zero.
// -------------------------------------------------------------------
$.fn.yShrinkOut = function (d,whenComplete) {
    var f = whenComplete || function () { },
        obj = this,
        padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop),
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom),
        begHeight = 0 + parseInt(obj.css('height'));

    obj.animate({ 'height': '0px', 'padding-top': 0, 'padding-bottom': 0 }, d, 'linear', function () {
            obj.addClass('hidden')
                .css('height', 0)
                .css('padding-top', padTop)
                .css('padding-bottom', padBottom);
            (f)();
        });
};

Alle von mir verwendeten Parameter können weggelassen oder auf null gesetzt werden, um Standardwerte zu akzeptieren. Die von mir verwendeten Parameter:

  • growTo: Wenn Sie alle Berechnungen überschreiben und die CSS-Höhe festlegen möchten, auf die das Objekt wächst, verwenden Sie diesen Parameter.
  • duration: Die Dauer der Animation ( offensichtlich ).
  • whenComplete: Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
2
Lopsided

Folie umschalten ( Antwort von Box9 erweitert)

$("#click-me").click(function() {
  var el = $('#first'),
  curHeight = el.height(),
  autoHeight = el.css('height', 'auto').height(),
  finHeight = $('#first').data('click') == 1 ? "20px" : autoHeight;
  $('#first').data('click', $(this).data('click') == 1 ? false : true);
  el.height(curHeight).animate({height: finHeight});
});
#first {width: 100%;height: 20px;overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <div id="click-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
</div>
2
che-azeh

Ihre Selektoren scheinen nicht zu passen. Hat Ihr Element die ID 'first' oder ist es das erste Element in jedem Div?

Eine sicherere Lösung wäre die Verwendung von "this":

// assuming the div you want to animate has an ID of first
$('#first').click(function() {
  $(this).animate({ height : 'auto' }, 1000);
});
2
EMMERICH

Ich brauchte diese Funktionalität für mehrere weitere Bereiche auf einer Seite, um dies in einen Wordpress Shortcode umzusetzen, bei dem ich auf dasselbe Problem gestoßen bin.

Designtechnisch haben alle Read More Spans auf der Seite eine feste Höhe. Und ich wollte sie separat mit einem Toggle auf eine automatische Höhe erweitern können. Erster Klick: 'Auf volle Texthöhe erweitern', zweiter Klick: 'Auf Standardhöhe von 70px reduzieren'

Html

 <span class="read-more" data-base="70" data-height="null">
     /* Lots of text determining the height of this span */
 </span>
 <button data-target='read-more'>Read more</button>

[~ # ~] CSS [~ # ~]

span.read-more {
    position:relative;
    display:block;
    overflow:hidden;
}

Das Attribut data-base, Das ich zum Festlegen der benötigten festen Höhe benötige, sieht also sehr einfach aus. Das Attribut data-height, Mit dem ich die tatsächliche (dynamische) Höhe des Elements gespeichert habe.

Der jQuery-Teil

jQuery(document).ready(function($){

  $.fn.clickToggle = function(func1, func2) {
      var funcs = [func1, func2];
      this.data('toggleclicked', 0);
      this.click(function() {
          var data = $(this).data();
          var tc = data.toggleclicked;
          $.proxy(funcs[tc], this)();
          data.toggleclicked = (tc + 1) % 2;
      });
      return this;
  };

    function setAttr_height(key) {
        $(key).each(function(){
            var setNormalHeight = $(this).height();
            $(this).attr('data-height', setNormalHeight);
            $(this).css('height', $(this).attr('data-base') + 'px' );
        });
    }
    setAttr_height('.read-more');

    $('[data-target]').clickToggle(function(){
        $(this).prev().animate({height: $(this).prev().attr('data-height')}, 200);
    }, function(){
        $(this).prev().animate({height: $(this).prev().attr('data-base')}, 200);
    });

});

Zuerst habe ich eine clickToggle-Funktion für meinen ersten und zweiten Klick verwendet. Die zweite Funktion ist wichtiger: setAttr_height() Bei allen .read-more - Elementen wird die tatsächliche Höhe beim Laden der Seite im Attribut base-height Festgelegt. Danach wird die Basishöhe über die Funktion jquery css eingestellt.

Wenn beide Attribute gesetzt sind, können wir jetzt reibungslos zwischen ihnen wechseln. Ändern Sie nur den data-base Auf Ihre gewünschte (feste) Höhe und wechseln Sie die .read-more-Klasse für Ihre eigene ID

Ihr könnt alle sehen, wie es in einer Geige funktioniert FIDDLE

Keine jQuery-Benutzeroberfläche erforderlich

1
Paul

sie können es in einem Datenattribut speichern.

$('.colapsable').each(function(){
    $(this).attr('data-oheight',$(this).height());
    $(this).height(100);
});

$('.colapsable h2:first-child').click(function(){
    $(this).parent('.colapsable').animate({
            height: $(this).parent('.colapsible').data('oheight')
        },500);
    }
});
1
defined media

Ich poste diese Antwort, obwohl dieser Thread alt ist. Ich konnte die akzeptierte Antwort nicht bekommen, um für mich zu arbeiten. Dieser funktioniert gut und ist ziemlich einfach.

Ich lade die Höhe jedes gewünschten Divs in die Daten

$('div').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});

Dann benutze ich das einfach beim Animieren auf Klick.

$('div').click(function(){
    $(this).css('height',$(this).data('height'));
});

Ich verwende den CSS-Übergang, daher verwende ich nicht jQuery animate, aber Sie könnten es trotzdem tun.

1
Leeish

Ich habe etwas zusammengestellt, das genau das tut, wonach ich gesucht habe und das großartig aussieht. Mit scrollHeight eines Elements können Sie die Höhe ermitteln, in der es in das DOM geladen wurde.

 var clickers = document.querySelectorAll('.clicker');
    clickers.forEach(clicker => {
        clicker.addEventListener('click', function (e) {
            var node = e.target.parentNode.childNodes[5];
            if (node.style.height == "0px" || node.style.height == "") {
                $(node).animate({ height: node.scrollHeight });
            }
            else {
                $(node).animate({ height: 0 });
            }
        });
    });
.answer{
        font-size:15px;
        color:blue;
        height:0px;
        overflow:hidden;
       
    }
 <div class="row" style="padding-top:20px;">
                <div class="row" style="border-color:black;border-style:solid;border-radius:4px;border-width:4px;">
                    <h1>This is an animation tester?</h1>
                    <span class="clicker">click me</span>
                    <p class="answer">
                        I will be using this to display FAQ's on a website and figure you would like this.  The javascript will allow this to work on all of the FAQ divs made by my razor code.  the Scrollheight is the height of the answer element on the DOM load.  Happy Coding :)
                         Lorem ipsum dolor sit amet, mea an quis vidit autem. No mea vide inani efficiantur, mollis admodum accusata id has, eam dolore nemore eu. Mutat partiendo ea usu, pri duis vulputate eu. Vis mazim noluisse oportere id. Cum porro labore in, est accumsan euripidis scripserit ei. Albucius scaevola elaboraret usu eu. Ad sed vivendo persecuti, harum movet instructior eam ei.
                    </p>
                </div>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
0
JimmyTwoShoes