यहाँ एक है जो BORDER-BOX के साथ काम करता है ...
हाय दोस्तों। यहाँ एक jQuery प्लगइन है जो मैंने ऐसा करने के लिए लिखा था, लेकिन ऊंचाई अंतर के लिए भी खाता है जो आपके द्वारा box-sizingसेट किए जाने पर होगा border-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)();
});
};
डिफ़ॉल्ट मानों को स्वीकार करने के लिए मेरे द्वारा उपयोग किए गए किसी भी पैरामीटर को छोड़ा जा सकता है या अशक्त करने के लिए सेट किया जा सकता है। मैंने जिन मापदंडों का उपयोग किया है:
- GrowTo: यदि आप सभी गणनाओं को ओवरराइड करना चाहते हैं और सीएसएस की ऊँचाई सेट करें, जिस पर ऑब्जेक्ट बढ़ेगा, इस पैरामीटर का उपयोग करें।
- अवधि: एनीमेशन की अवधि ( स्पष्ट रूप से )।
- whenComplete: जब एनीमेशन पूरा हो गया है एक समारोह को चलाने के लिए।