如何在悬停时将div的宽度增加10％

Question

e.g。 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

正是我所希望的。谢谢，davidpfahler