এখানে একটি যা বর্ডার-বাক্সের সাথে কাজ করে ...
হাই বন্ধুরা এখানে একই কাজ করতে আমি লিখেছি এমন একটি 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)();
});
};
আমি ব্যবহৃত প্যারামিটারগুলির মধ্যে কোনওটি ডিফল্ট মানগুলি গ্রহণ করার জন্য বাদ দিতে বা নালায় সেট করা যেতে পারে। আমি ব্যবহৃত প্যারামিটারগুলি:
- গ্রেটটো: আপনি যদি সমস্ত গণনা ওভাররাইড করতে চান এবং সিএসএসের উচ্চতাটি সেট করতে চান যা অবজেক্টটি বৃদ্ধি পাবে, এই পরামিতিটি ব্যবহার করুন।
- সময়কাল: অ্যানিমেশনের সময়কাল ( স্পষ্টতই )।
- কখন কমপ্লিট: অ্যানিমেশন সম্পূর্ণ হয়ে গেলে চালানোর জন্য একটি ফাংশন।