ฉันต้องการให้เคลื่อนไหว<div>จาก200pxการautoสูง ฉันไม่สามารถทำงานได้ ไม่มีใครรู้ได้อย่างไร

นี่คือรหัส:

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

1. บันทึกความสูงปัจจุบัน:

   var curHeight = $('#first').height();

2. เปลี่ยนความสูงเป็นอัตโนมัติชั่วคราว:

   $('#first').css('height', 'auto');

3. รับส่วนสูงอัตโนมัติ:

   var autoHeight = $('#first').height();

4. เปลี่ยนกลับเป็นcurHeightและทำให้เป็นautoHeight:

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

และร่วมกัน:

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

IMO นี่คือทางออกที่สะอาดและง่ายที่สุด:

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

คำอธิบาย: DOM รู้อยู่แล้วจากการเรนเดอร์เริ่มต้นว่าขนาดที่ div ที่ขยายจะมีเมื่อตั้งค่าเป็น auto height สถานที่แห่งนี้จะถูกเก็บไว้ในโหนด DOM scrollHeightเป็น เราแค่ต้องดึงองค์ประกอบ DOM จากองค์ประกอบ jQuery โดยการโทรget(0)แล้วเราสามารถเข้าถึงคุณสมบัติ

การเพิ่มฟังก์ชั่นการโทรกลับเพื่อตั้งค่าความสูงเป็นอัตโนมัติช่วยให้สามารถตอบสนองได้ดียิ่งขึ้นเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ (credit chris-williams ):

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

นี่เป็นวิธีการเดียวกับคำตอบของ Box9 แต่ฉันใส่ไว้ในปลั๊กอิน jqueryที่ใช้อาร์กิวเมนต์เดียวกับภาพเคลื่อนไหวปกติเมื่อคุณต้องการพารามิเตอร์ที่มีภาพเคลื่อนไหวมากขึ้นและเบื่อที่จะทำซ้ำรหัสเดิมซ้ำแล้วซ้ำอีก :

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

แก้ไข: chainable และ clean ตอนนี้

ทางออกที่ดีกว่าจะไม่พึ่งพา JS เพื่อกำหนดความสูงขององค์ประกอบของคุณ ต่อไปนี้เป็นโซลูชันที่ทำให้อิลิเมนต์ความสูงคงที่เป็นความสูงแบบเต็ม ("อัตโนมัติ"):

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

มันใช้งานได้และมันก็ง่ายกว่าวิธีแก้ปัญหาก่อน:

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");
        }

    })
});

หมายเหตุ: วิธีนี้ต้องใช้ jQuery UI

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

คุณสามารถล้อมองค์ประกอบย่อยของ #first และบันทึกความสูงความสูงของ wrapper เป็นตัวแปร นี่อาจไม่ใช่คำตอบที่สวยที่สุดหรือมีประสิทธิภาพที่สุด แต่เป็นเคล็ดลับ

นี่คือซอที่ฉันรวมการรีเซ็ต

แต่สำหรับวัตถุประสงค์ของคุณนี่คือเนื้อและมันฝรั่ง:

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

ใช้slideDownและslideUp

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

ฉันจัดการเพื่อแก้ไข: D รหัสนี้

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

คุณสามารถทำให้คำตอบของ Liquinaut ตอบสนองต่อการเปลี่ยนแปลงขนาดหน้าต่างโดยการเพิ่มการโทรกลับที่ตั้งค่าความสูงกลับเป็นอัตโนมัติ

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

โดยทั่วไปความสูงอัตโนมัติจะมีให้เฉพาะคุณหลังจากที่องค์ประกอบถูกแสดงผล หากคุณตั้งค่าความสูงคงที่หรือหากองค์ประกอบของคุณไม่ปรากฏขึ้นคุณจะไม่สามารถเข้าถึงได้หากไม่มีลูกเล่นใด ๆ

โชคดีที่มีเทคนิคบางอย่างที่คุณอาจใช้

โคลนองค์ประกอบแสดงนอกมุมมองให้ความสูงอัตโนมัติและคุณสามารถนำมันมาจากโคลนและใช้ในภายหลังสำหรับองค์ประกอบหลัก ฉันใช้ฟังก์ชั่นนี้และดูเหมือนว่าจะทำงานได้ดี

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

การใช้:

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

คุณสามารถทำสิ่งนี้ได้ตลอดเวลา:

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

นี่คือซอ: http://jsfiddle.net/Zuriel/faE9w/2/

ตัวเลือกของคุณดูเหมือนจะไม่ตรงกัน องค์ประกอบของคุณมีรหัส 'แรก' หรือเป็นองค์ประกอบแรกในทุก div หรือไม่

ทางออกที่ปลอดภัยกว่าคือการใช้ 'this':

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

ลองอันนี้ ,

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

นี่คืออันที่ทำงานกับ BORDER-BOX ...

ไงพวก นี่คือ jQuery ปลั๊กอินที่ผมเขียนจะทำเช่นเดียวกัน แต่ยังบัญชีสำหรับความแตกต่างของความสูงที่จะเกิดขึ้นเมื่อคุณได้ตั้งค่าให้box-sizingborder-box

ฉันยังรวมปลั๊กอิน "yShrinkOut" ที่ซ่อนองค์ประกอบด้วยการลดขนาดลงตามแนวแกน y

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

พารามิเตอร์ใด ๆ ที่ฉันใช้สามารถละเว้นหรือตั้งค่าเป็น null เพื่อยอมรับค่าเริ่มต้น พารามิเตอร์ที่ฉันใช้:

• growTo:หากคุณต้องการแทนที่การคำนวณทั้งหมดและตั้งค่าความสูง CSS ที่วัตถุจะเติบโตให้ใช้พารามิเตอร์นี้
• ระยะเวลา:ระยะเวลาของภาพเคลื่อนไหว ( ชัด )
• whenComplete:ฟังก์ชั่นที่จะทำงานเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์

สไลด์สลับ ( ขยายคำตอบของ Box9 )

$("#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>

ฉันโพสต์คำตอบนี้แม้ว่ากระทู้นี้จะเก่า ฉันไม่สามารถรับคำตอบที่ได้รับการยอมรับสำหรับฉัน อันนี้ใช้ได้ดีและค่อนข้างเรียบง่าย

ฉันโหลดความสูงของแต่ละ div ที่ฉันต้องการลงในข้อมูล

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

จากนั้นฉันก็ใช้สิ่งนั้นเมื่อเคลื่อนไหวเมื่อคลิก

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

ฉันใช้การเปลี่ยนแปลง CSS ดังนั้นฉันจึงไม่ใช้ภาพเคลื่อนไหว jQuery แต่คุณสามารถสร้างภาพเคลื่อนไหวได้เหมือนกัน

คุณสามารถเก็บไว้ใน data data ได้

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

ฉันต้องการฟังก์ชั่นนี้สำหรับหลาย ๆ พื้นที่อ่านเพิ่มเติมในหน้าเดียวที่นำสิ่งนี้ไปใช้เป็นรหัสย่อของ Wordpress ที่ฉันพบเจอในปัญหาเดียวกัน

เทคนิคการออกแบบทั้งหมดของช่วงอ่านบนหน้ามีความสูงคงที่ และฉันต้องการที่จะขยายพวกเขาแยกเป็นความสูงอัตโนมัติด้วยการสลับ คลิกครั้งแรก: 'ขยายให้เต็มความสูงของช่วงข้อความ', คลิกครั้งที่สอง: 'ย่อกลับเป็นความสูงเริ่มต้นที่ 70px'

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

ดังนั้นข้างต้นนี้ดูเหมือนว่าdata-baseคุณสมบัติที่ฉันต้องการเพื่อกำหนดความสูงคงที่ที่จำเป็น data-heightแอตทริบิวต์ที่ผมใช้ในการจัดเก็บที่เกิดขึ้นจริงสูง (แบบไดนามิก) ขององค์ประกอบ

ส่วน jQuery

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

});

ก่อนอื่นฉันใช้ฟังก์ชั่น clickToggle สำหรับการคลิกครั้งแรกและครั้งที่สอง ฟังก์ชั่นที่สองเป็นสิ่งสำคัญมาก: setAttr_height()ทุก.read-moreองค์ประกอบที่มีความสูงที่แท้จริงของพวกเขาตั้งอยู่บนการโหลดหน้าเว็บในbase-heightแอตทริบิวต์ หลังจากนั้นความสูงฐานจะถูกตั้งค่าผ่านฟังก์ชั่น jquery css

ด้วยชุดคุณลักษณะทั้งสองของเราตอนนี้เราสามารถสลับระหว่างกันได้อย่างราบรื่น เฉพาะช้างdata-baseจะต้องการ (คงที่) ความสูงของคุณและสลับชั้น .read มากขึ้นสำหรับ ID ของคุณเอง

คุณสามารถเห็นมันทำงานได้ในซอFIDDLE

ไม่จำเป็นต้องใช้ jQuery UI

หากสิ่งที่คุณต้องการคือการแสดงและซ่อนพูด div แล้วรหัสนี้จะช่วยให้คุณใช้ jQuery เคลื่อนไหว คุณสามารถทำให้ jQuery เคลื่อนไหวส่วนใหญ่ของความสูงที่คุณต้องการหรือคุณสามารถหลอกให้เคลื่อนไหวโดยสร้างภาพเคลื่อนไหวไปที่ 0px jQuery เพียงต้องการความสูงที่กำหนดโดย jQuery เพื่อแปลงเป็นอัตโนมัติ ดังนั้น. animate จึงเพิ่ม style = "" ให้กับองค์ประกอบที่. css (สูง: อัตโนมัติ) แปลง

วิธีที่สะอาดที่สุดที่ฉันเคยเห็นงานนี้คือการเคลื่อนไหวให้อยู่ในระดับความสูงตามที่คุณคาดหวังจากนั้นปล่อยให้มันตั้งค่าอัตโนมัติและสามารถดูราบรื่นมากเมื่อทำถูกต้อง คุณสามารถมีชีวิตที่ผ่านมาในสิ่งที่คุณคาดหวังและมันจะ snap กลับ การเคลื่อนไหวถึง 0px ในระยะเวลา 0 เพียงแค่ลดความสูงขององค์ประกอบให้เป็นความสูงอัตโนมัติ ต่อสายตามนุษย์มันดูเคลื่อนไหวอยู่ดี สนุก..

    jQuery("div").animate({
         height: "0px"/*or height of your choice*/
    }, {
         duration: 0,/*or speed of your choice*/
         queue: false, 
         specialEasing: {
             height: "easeInCirc"
        },
         complete: function() {
             jQuery(this).css({height:"auto"});
        }
    });

ขออภัยฉันรู้ว่านี่เป็นโพสต์เก่า แต่ฉันรู้สึกว่านี่จะเกี่ยวข้องกับผู้ใช้ที่กำลังมองหาฟังก์ชั่นนี้อยู่กับ jQuery ที่เจอโพสต์นี้

ฉันรวบรวมบางอย่างที่ทำในสิ่งที่ฉันกำลังมองหาและดูดี การใช้ scrollHeight ขององค์ประกอบทำให้คุณได้รับความสูงของเมื่อมันถูกโหลดใน DOM

 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>