jquery - ホバー時にdivの幅を10％増やすにはどうすればよいですか

Question

例: 200px から 220px。どうやら「+=10%」は思ったように動かないようです。ここに私のコードがありますhttp://bit.ly/Wyhe32

Answer 1

アニメーション化するか、ホバー時に値を設定するだけかはわかりません。ここでは両方です。

アニメーション

$(".gds").css({
    'backgroundColor': '#DBEAF9'
}).hover(function () {
    $(this).stop().animate({
        width: $(this).width()*1.1
    }, 350).addClass('shadow');
}, function () {
    $(this).stop().animate({
        width: ($(this).width()/110)*100
    }, 350).removeClass('shadow');
});​

シンプルな CSS プロパティの変更

$(".gds").css({
    'backgroundColor': '#DBEAF9'
}).hover(function () {
    $(this).css('width', $(this).width()*1.1)+'px';
}, function () {
    $(this).css('width', (($(this).width()/110)*100)+'px')
    }, 350).removeClass('shadow');
});​

これが役立つことを願っています。

Answer 2

要素の幅を取得し、それを css プロパティの Width: に適用します。

$('.divclass').css('width',$('.divclass').width() + ((parseFloat($('.divclass').width())) / 100) * 10) + "px");

Answer 3

ホバー関数の先頭に次のコードを追加します。

var newWidth = (parseFloat($('.gds').width()) * 1.1);

このフィドルを確認してください：http：//jsfiddle.net/scaillerie/rKT2p/

Answer 4

width:$(this).width()*1.1

私が望んでいたことを正確に行います。ありがとう、デビッドファーラー