Hoạt ảnh Chiều cao / Chiều rộng thành "Tự động" - Thủ thuật CSS

Nó không thể làm được thing.animate(( "height": "auto" ));. Vì vậy, đây là phương pháp của Darcy Clarke để cho phép điều đó hoạt động. Về cơ bản, bạn sao chép phần tử, loại bỏ các độ cao cố định hiện gây ra phần tử và đo / lưu giá trị. Sau đó, bạn chuyển phần tử thực thành giá trị đó.

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

Sử dụng

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