jQuery анимация высоты одновременно на сложенных элементах

Question

jQuery анимация высоты одновременно на сложенных элементах

0

Я пытаюсь выяснить, как я могу анимировать высоту сложенных элементов, как в этом примере: http://jsfiddle.net/QtrDj/, не имея этой "вибрации" внизу.

Когда вы нажимаете красную полосу, вы видите, что нижняя нижняя синяя полоса не остается на месте. То, что я хотел бы оживить, - это высота двух элементов, но без изменения суммы их высоты.

Я думаю, проблема в том, что в какой-то момент анимации вычисленное значение округляется до значения меньшего/большего размера.

Могу ли я предотвратить это с помощью jQuery?

Я нашел другие вопросы с одновременной анимацией, и все они сказали очередь, но на самом деле я ищу что-то еще не только одновременно, но и с дополнительными ограничениями. Вот что я пробовал:

var one = jQuery(".one").animate({
    height: equal ? 50 : 150
}, {
    queue: false
}).promise();

var two = jQuery(".two").animate({
    height: equal ? 150 : 50
}, {
    queue: false
}).promise();

jQuery.when(one, two).done(function () {
    equal = !equal;
});

Спасибо, Норберт

norbertk 28 апр. 2014, в 11:26

Источник

Теги:

jquery

animation

2 ответа

0

Я не уверен, если вы можете предотвратить это, если вы не хотите переписать весь код анимации самостоятельно. Я переписал код с помощью css-переходов и прослушивателя событий, и он делает то же самое

jQuery(".one").on( 
     'webkitTransitionEnd', 
     function( event ) { 
         equal = !equal;
         alert( "Finished transition!" ); 
     } );

как здесь:

http://jsfiddle.net/pH5r2/

Totò 28 апр. 2014, в 07:35

Ещё вопросы

haxxxton · Accepted Answer · 2014-04-28T06-36-00.000Z

вы можете подделать его сплошным синим div в качестве фона. а затем используйте нижний край на вашем верхнем div, чтобы они выглядели как отдельные div. Это позволило бы "вибрацию" без визуального наблюдения

Попробуйте этот JSFiddle

HTML

<div class="container">
    <div class="bar red">Click me</div>
    <div class="stack-container">
        <div class="stacked-bar blue one"></div>
        <div class="stacked-bar blue two"></div>
    </div>
</div>
<p>Click the red bar</p>

CSS

.container { width: 108px; font-size: 0; }

.bar{
    display: inline-block;
    width: 50px;
    margin: 2px;
}
.stack-container{
    display:inline-block;
    width:50px;
    float:left;
    margin:2px;
    background:black;
    height:204px;
}

.bar { height: 204px; float: left; }
.stacked-bar { 
    display: inline-block;
    width: 50px;
    height: 100px; 
}
.one{
    border-bottom:4px solid white;
}
.red { background-color: red; }
.blue { background-color: blue; }

JS

var equal = true;

jQuery(".red").on("click", function () {
    "use strict";

    var one = jQuery(".one").animate({
        height: equal ? 50 : 150
    }, {
        queue: false
    }).promise();

    var two = jQuery(".two").animate({
        height: equal ? 150 : 50
    }, {
        queue: false
    }).promise();

    jQuery.when(one, two).done(function () {
        equal = !equal;
    });

});

Благодарю. Я принимаю ваше решение, потому что оно решает проблему, но я не думаю, что буду его использовать. Я действительно против любых взломов, которые включают «давайте введем еще один элемент» только для дизайна :)
@norbertk полностью понимает: если вы беспокоитесь о добавлении DOM-элементов в ваш HTML, вы можете посмотреть на добавление псевдо-элементов в CSS, используя что-то вроде :after или :before чтобы сделать то же самое?