jquery - 如何在悬停时将 div 的宽度增加 10%

Question

例如 200 像素到 220 像素。显然“+=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

宽度：$(this).width()*1.1

完全符合我的要求。谢谢你，大卫法勒

Answer 4

在悬停功能的开头添加此代码：

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

检查这个小提琴：http: //jsfiddle.net/scaillerie/rKT2p/