Как запустить jquery .animation из центра

Question

Как запустить jquery .animation из центра

0

Jquery:

$(function() {
    $( ".active" ).animate({width: "100%"}, 500);
});

Html:

<div class="active"></div>

Со стилями:

.active {
    background: #1f679b;
    height: 4px;
    margin-top: -4px;
    width: 0px;
}

Как начать анимацию в центре вместо запуска слева?

fdsugfh 28 апр. 2014, в 17:12

Источник

Теги:

javascript

jquery

html

css

2 ответа

2

Начните с 50% -ной маржи:

.active {
    background: #1f679b;
    height: 4px;
    margin-top: -4px;
    width: 0px;
    margin-left: 50%;
}

и оживить, что до 0:

$(function() {
    $( ".active" ).animate({
        width: "100%", 
        marginLeft: 0
    }, 500);
});

http://jsfiddle.net/Qkh6n/

James Montagne 28 апр. 2014, в 12:42

0

Спасибо работает отлично
fdsugfh 28 апр. 2014, в 15:08

Ещё вопросы

fcalderan · Accepted Answer · 2014-04-28T12-37-00.000Z

просто измените

margin-top: -4px

в

margin: -4px auto 0 auto;

Результирующий эффект - это div, который растет, но во время анимации он всегда центрируется из-за того, что левое и правое поле установлено в auto. Не нужно изменять свойства анимации

Пример Codepen: http://codepen.io/anon/pen/IpFxn