如果我有一个像这样带有默认 css 的按钮，我该如何制作它，当您单击按钮时，文本会发生变化并且它的宽度会被动画化以适应新文本？
HTML
<button>Click Me</button>
jQuery
$(document).on("click", "button", function(){
$(this).text("You have clicked me!", function(){
$(this).animate({width:"auto"}, 1000);
});
})
jsFiddle
这是一个可行的示例，您需要稍微玩一下 http://jsfiddle.net/HYZbA/47/
但正如 Tomzan 所说，不可能将宽度设置为自动，因此该示例使用了解决方法。
我先固定宽度，然后更改文本和动画，这可以防止按钮自己做自动宽度。
$("button").bind("click", function(e){
$(this).css("width", $(this).width());
$(this).text("test test test test test test test");
$(this).animateAuto("width", 1000);
$("button").click(function () {
var oldWidth = $(this).width();
$(this).text("stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff");
var newWidth = $(this).outerWidth();
$(this).width(oldWidth);
$("button").animate({
width: newWidth + 'px'
}, 1000);
})
你可以试试：
$("button").click(function(){
var widthOld = $(this).width();
$(this).text("You have clicked me!");
var widthNew = $(this).width();
$(this).animate({width: widthOld+'px'},0).animate({width:widthNew+"px"}, 1000,
function() {$(this).css('width', 'auto');}
);
});