Transfer CSS value to DOM style attribute

Question

enter image description here

Let assume that the #div1 has padding-left set to 50px. By pressing a specific button the padding is changing to 0 with an animation:

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

#div2 is a block so it will change its size together with #div1.

Now the heart of the matter, I want to transfer the #div2 width value to <div id="div2" style="width: [HERE]"></div> using jQuery. And then when #div1 will be animated the #div2 width will start to change its value in style attribute. I would like to see in browser developer tool how width of #div2 is changing. Something like this:

Button released:

`<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>`

After one sec:

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

How can it be done ?

@Macko, Your motives are somewhat vague. But it sounds like you just want to see what the current width of `div2` is during the animation. If so, this will print the width of `div2` to console for each step in the animation: http://jsfiddle.net/pND4X/ -- Hope that helps. — David Link, Nov 11 '13 at 19:36
Hmm it's hard to explain for me. English is not my native language. I want to see these steps -
. Not in #div1 but in #div2 which is not animated by using jQuery — Macko Tarana, Nov 11 '13 at 20:05
http://meetselva.github.io/attrchange/ - I'm using this plugin, it detects attribute changes like style for example. With this one i don't need to use setinterval anymore. The whole idea is experimental, I'm looking for best solutions on my own. — Macko Tarana, Nov 11 '13 at 20:22

score 1 · Accepted Answer · answered Nov 12 '13 at 14:14

The closest you can get is something like this, which calculates the auto width, then updates the DOM style property using jQuery's .attr

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

Overall this reallyisn't that useful because the browser inspector isn't an instantaneous change, so it jumps to the next values. Plus there is really no need for displaying the changes inline. If you want to display the change through another element (this shows immediate changes), then you can do so by using the same approach as my updated version of David Link's fiddle

score 0 · Answer 2 · answered Nov 12 '13 at 15:25

If I understand correctly... this can be done with simple CSS Transitions.

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");
});

DEMO: http://jsfiddle.net/yinnette/VVe64/

Transfer CSS value to DOM style attribute

2 Answers2