jQuery animate: разделить одну анимацию на две части

Question

Следующий фрагмент кода выполняется для плавной анимации:

    $('button').animate({
        'margin-top': 123,
        'opacity': 1
    }, 500);

Возможно ли как-то разделить его на две команды, не создавая эффект очереди двух анимаций?

    jQelems.$divSlideButtonLeft.animate({
        'margin-top': 123,
    }, 500);

    jQelems.$divSlideButtonLeft.animate({
        'opacity': 1
    }, 500);

Цель состоит в том, чтобы разделить анимацию для одного объекта в разных функциях.

Answer 1

Если я правильно понимаю ваш вопрос, вы можете использовать вторую форму из animate() и передать false в опции queue:

jQelems.$divSlideButtonLeft.animate({
    "margin-top": 123
}, {
    duration: 500,
    queue: false
});

jQelems.$divSlideButtonLeft.animate({
    opacity: 1
}, {
    duration: 500,
    queue: false
});

В документации сказано:

queue: логическое значение, указывающее, помещать ли анимацию в очередь эффектов. Если false, анимация начнется немедленно.

Answer 2

вы можете попробовать вызовите функцию непрозрачности в функции обратного вызова анимации первой части.

$('button').animate({'margin-top': 123,}, 500, function (){
$('button').animate({  'opacity': 1}, 500)
});

обе анимации будут происходить одна за другой.