代码之家 › 专栏 › 技术社区 › user113716

jQuery:div在动画之后会弹出到完整大小

width resize animation jquery

user113716 · 技术社区 · 17 年前

在下面的jQuery示例中,我将一个div放在另一个div中。当我将内部div设置为宽度为0时,外部div(具有绝对定位)的宽度也随之减小。

这是需要的。

问题在于,动画完成后,外部div会弹回到其原始大小。这是预期的吗?我怎样才能避免这种情况发生?

实例

html:

<div class="outer"><div class="inner">innerContent</div></div>

css:

div.outer {
    position: absolute;
    padding: 10px;
    background: purple;
}

div.inner {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    background: orange;
    clip: auto; overflow: hidden;
}

javascript:

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow');
});

4 回复 | 直到 17 年前

user113716 17 年前

关于这是否应该是jquery或webkit或两者的bug修复请求的任何意见。

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth();
    var outerWidth = $('.outer').width();
    var theWidth = outerWidth - innerWidth;
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow' );
    $('.outer').animate({width: theWidth}, 'slow');
});

peirix 17 年前

动画完成后,您是否尝试将outerbox宽度设置为0?

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});

Keeper 17 年前

对于我来说,在Firefox3.0.10中使用Ubuntu9.04中的jQuery1.3.2,这非常有效。可能是与页面中其他html元素的某种交互?

ichiban 17 年前

在我的测试中,这在IE、FF和Opera中运行良好,但会产生您在Chrome和Safari中提到的bug。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前