Question

enter image description here

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

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

#div2是一个块，因此它会与#div1一起更改其大小。

现在问题的核心是，我想使用jQuery将#div2 width值转移到<div id="div2" style="width: [HERE]"></div>。然后，当动态#div1时，#div2 width将开始更改其在style属性中的值。我想在浏览器开发者工具中看到#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
    )
});

总的来说，这实际上没有用，因为浏览器检查器不是瞬时更改，因此它会跳转到下一个值。此外，实际上不需要在线显示更改。如果你想通过另一个元素显示更改（这显示了立即的更改），那么你可以使用与David Link的小提琴的my updated version相同的方法来实现这一点

Answer 2

如果我理解正确...这可以通过简单的CSS转换完成。

HTML：

<div class="div1">
    <div class="div2"></div>
</div>
<a href="#" id="button">Animate</a>

CSS：

div {
  -webkit-transition: width 1s ease;
  -moz-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
  float:right;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.div1 {
    border: 1px solid #ccc;
    padding: 10px 10px 0 50px;
    float:right;
    width: 400px;
}
.div2 {
    border: 1px solid red;
    padding: 10px;
    margin-bottom: 10px;
    height: 100px;
    width:250px;
}
.no-padding {
    width: 600px;
}
.adjust-width{
  transition-delay: .8s;
  width:100%;
}

JQUERY：

$("#button").click( function() {
    $(".div1").toggleClass("no-padding");
    $(".div2").toggleClass("adjust-width");
});

<强>样本： http://jsfiddle.net/yinnette/VVe64/

将CSS值传输到DOM样式属性

2 个答案: