Анимация высоты онлайн урок.


Невозможно выполнитьthing.animate ({"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);
});