jquery - 将 CSS 值传递给 DOM 样式属性

Question

假设 #div1有padding-left设置为 50px .通过按下特定按钮，填充将变为 0带有动画:

$('button').click(function(){
    $('#div1').animate({'padding-left':0}, 1000);
});

#div2是一个 block ，所以它会随着 #div1 一起改变它的大小.

现在问题的核心，我要转移#div2 width值 <div id="div2" style="width: [HERE]"></div>使用 jQuery。然后当#div1将动画化 #div2 width将开始更改其在样式属性中的值。我想在浏览器开发工具中查看 #div2 的宽度如何在改变。像这样:

释放按钮:

`<div id="div2" style="width: 200"></div>`
`<div id="div2" style="width: 211"></div>`
`<div id="div2" style="width: 224"></div>`
`<div id="div2" style="width: 235"></div>`
`<div id="div2" style="width: 244"></div>`
`<div id="div2" style="width: 250"></div>`

一秒后:

`<div id="div2" style="width: 250"></div>`
`<div id="div2" style="width: 250"></div>`
`<div id="div2" style="width: 250"></div>`

如何做到？

Answer 1

最接近的是something like this ，计算 auto 宽度，然后使用 jQuery 的 .attr

更新 DOM 样式属性

$("button").click(function(){
    $("#div1").animate(
        {
            marginLeft: 0
        }, {
            step: function(){
                $('#div2').width('auto');
                var width = $('#div2').width();
                $('#div2').attr('style', 'width: ' + width + 'px;');
            }
        }, 5000
    )
});

总的来说，这真的不是那么有用，因为浏览器检查器不是瞬时变化，所以它会跳转到下一个值。另外，确实不需要显示内联更改。如果您想通过另一个元素显示更改(这会显示即时更改)，那么您可以使用与 my updated version 相同的方法来实现。 David Link 的 fiddle