jquery - 如何在 10 秒或更长时间内更改 jquery 的宽度

Question

我有这样的jQuery代码：

$(function() {
$('#butt1').click(function(){
    $('#jabe1').css("width", "300px");
    
});
});

我希望#jabe1 宽度在 10 秒内改变，而不是在点击后 0 秒内改变
：

$('#jabe1').hide(200);

它会慢慢隐藏
我希望#jabe1 宽度像那样隐藏

jabe1 css代码：

#banners li {
    float: left;
    height: 411px;
    width: 268px;
    margin: 0px 0px 0px -50px;
    position: relative;
    background: url("../images/banner-shadow.png") no-repeat scroll center bottom transparent;
    padding: 0px;
    font-style: normal;
}

Answer 1

尝试使用 jQuery 的animate().

Javascript代码

// Shrink the width
$('#jabe1').animate({width: '0px'}, 10000);

// Expand the width
$('#jabe1').animate({width: '300px'}, 10000);

Answer 2

使用动画使其变大

$("#jabe1").animate({
    width: "150%",
}, 1500 );

将宽度设置为大于当前的宽度，以便扩展。如果您将宽度设置为小于当前的宽度，它将缩小。

要了解有关动画功能的更多信息，请参阅 jQuery animate()。