2

デフォルトのCSSでこのようなボタンがある場合、ボタンをクリックするとテキストが変更され、新しいテキストに収まるように幅がアニメーション化されるようにするにはどうすればよいですか?

HTML

<button>Click Me</button>

jQuery

$(document).on("click", "button", function(){

    $(this).text("You have clicked me!", function(){
        $(this).animate({width:"auto"}, 1000);
    });

})

jsフィドル

http://jsfiddle.net/HYZbA/41/

4

4 に答える 4

2

これは、そのような作品の例です。少し遊んでみる必要があります http://jsfiddle.net/HYZbA/47/

しかし、トムザンが言ったように、幅を自動にアニメーション化することはできないため、この例では回避策を使用しています。

最初に幅を修正してから、テキストを変更してアニメーション化します。これにより、ボタンが自動幅を自動的に実行できなくなります。

$("button").bind("click", function(e){
$(this).css("width", $(this).width());
$(this).text("test test test test test test test");
$(this).animateAuto("width", 1000);
于 2013-08-28T13:42:21.583 に答える
1

あなたが試すことができます： 

$("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');}
    ); 
});
于 2013-08-28T13:41:41.673 に答える