jquery ارتفاع تحريك

Question

لدي زر و div مع بعض النصوص:

<h2>Click me</h2>
<div class="expand">Lot of text here....</div>

أريد أن أعرض صفتين فقط من النص على أنه افتراضي ، لذلك وضعت ارتفاعًا إلى 30 بكسل وأخفي في التدفق.

عندما أقوم بالنقر فوق عنصر H2 ، أريد تحريك النص للانزلاق ، وإذا انقر فوق مرة أخرى ، فسوف ينزلق إلى الارتفاع الافتراضي (30 بكسل).

أحاول العديد من الأشياء مع jQuery ، لكنها لا تعمل.

تعديل:

لديّ أيضًا أكثر من "توسيع" وأكثر من "H2" والنص مختلف في DIV ، وبالتالي فإن الارتفاع ليس إصلاحًا ... أود أن أنقل إلى ارتفاع "Auto" أو 100 ٪.

هل يستطيع احد مساعدتي؟ شكرًا!

Answer 1

يمكنك تخزين الارتفاع قبل أن ينحدر إلى 30 بكسل في تحميل الصفحة ، على سبيل المثال:

$(".expand").each(function() {
  $.data(this, "realHeight", $(this).height());
}).css({ overflow: "hidden", height: "30px" });

ثم في الخاص بك click معالج:

$("h2").toggle(function() {
  var div = $(this).next(".expand")
  div.animate({ height: div.data("realHeight") }, 600);
}, function() {
  $(this).next(".expand").animate({ height: 30 }, 600);
});

إذن ما يفعله هذا هو الحصول على .height() (قم بتشغيل هذا document.ready) قبل ال overflow: hidden قام بتعيينه ، ويخزنها عبر $.data(), ثم في click معالجات (عبر .toggle() للبديل) ، نستخدم هذه القيمة (أو 30) كل نقرة أخرى .animate() ل.

Answer 2

ال scrollHeight يمكن أن تمنحك خاصية عنصر DOM أيضًا الارتفاع الذي تحتاجه.

$(".expand").animate({
    height : $(".expand")[0].scrollHeight
},2000);

يمكن العثور على مثال العمل في http://jsfiddle.net/af3xy/4/

Answer 3

هذا الموضوع ليس هو الأحدث ، ولكن هنا نهج آخر.

لقد كنت أتعامل مع نفس المشكلة اليوم ولم أتمكن من العمل بشكل صحيح. حتى مع الارتفاع الصحيح المحسوب مع height: auto المطبق ، الرسوم المتحركة لن تعطيني النتائج الصحيحة. حاولت وضعه في $(window).load بدلاً من $(document).ready, ، والتي ساعدت قليلاً ، لكنها ما زالت تقطع خط النص الأخير.

بدلاً من تحريك الارتفاع نفسه ، تمكنت من حل المشكلة عن طريق إضافة وإزالة أ مختفي الفصل إلى Div ديناميكي. إذا كنت تستخدم jQuery-UI, ، يمكنك تطبيق مدة على هذه الآثار. يبدو أن هذا يعمل في جميع المتصفحات أيضًا.

هنا تبرز العمل.