Передать значение CSS в атрибут стиля DOM

0

Изображение 174551

Предположим, что #div1 имеет значение padding-left 50px. Нажав на определенную кнопку, отступы меняются на 0 с анимацией:

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

#div2 - это блок, поэтому он изменит свой размер вместе с #div1.

Теперь самое #div2, я хочу передать #div2 width #div2 в <div id="div2" style="width: [HERE]"></div> с помощью jQuery. И тогда, когда #div1 будет анимироваться, width #div2 начнет изменять его значение в атрибуте 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>'

Как это можно сделать?

  • 0
    Вы имеете в виду, как это?
  • 1
    @Macko, Ваши мотивы несколько расплывчаты. Но звучит так, будто вы просто хотите увидеть текущую ширину div2 во время анимации. Если это так, это выведет ширину div2 на консоль для каждого шага анимации: jsfiddle.net/pND4X - Надеюсь, это поможет.
Показать ещё 6 комментариев
Теги:
dom
inline-styles

2 ответа

1
Лучший ответ

Самое близкое, что вы можете получить, это что-то вроде этого, которое вычисляет ширину auto, затем обновляет свойство стиля DOM с помощью jQuery .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

Поделиться
  • 0
    Спасибо, это именно то, что я искал :)
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%;
}

Jquery:

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

ДЕМО: http://jsfiddle.net/yinnette/VVe64/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню