0

在此处输入图像描述

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

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

#div2是一个块，因此它将与 一起改变它的大小#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>`

怎么做到呢 ？

4

2 回答 2

1

你能得到的最接近的是这样的，它计算auto宽度，然后使用 jQuery 更新 DOM 样式属性.attr 

$("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 小提琴相同的方法来实现

于 2013-11-12T14:14:40.690 回答
0

如果我理解正确......这可以通过简单的 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%;
}

查询： 

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

演示：http: //jsfiddle.net/yinnette/VVe64/

于 2013-11-12T15:25:48.470 回答