Question

如果我有一个默认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/41/

Answer 1

这是一个有效的例子，你需要稍微玩一下 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);

Answer 2

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

<强> jsFiddle example

Answer 3

您无法将宽度/高度设置为自动，

而是给出一个不可见的相似元素宽度/高度auto并保存它们的计算值，然后使用计算值为您自己的元素设置动画。

以下是解释如何操作的link。

Answer 4

您可以尝试：

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

按钮文本更改时jQuery动画宽度

4 个答案: