Question

The following code snippet is performing on smoothe animation:

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

Is is somehow possible to split it in two commands without having the effect of queuing the two animations?

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

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

The aim is to be able to seperate animations for one object in different functions.

Answer 1

If I understand your question correctly, you can use the second form of animate() and pass false in the queue option:

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

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

The documentation says:

queue: A Boolean indicating whether to place the animation in the
effects queue. If false, the animation will begin immediately.