如何使用 jQuery 一次制作 2 个动画

Question

我正在做一个网络项目。我想用动画绘制一个 div 元素（看起来像一个表格）：我单击按钮，然后 div 元素在按钮上出现一个小尺寸，然后它浮动到“它的”位置，同时获得它的原始大小。 我设法做到了这一点，但只是随后。首先是缩放，而不是浮动。我希望这些动画同时进行。

我使用 jQuery ui show() 函数使 div 出现并缩放到其原始大小，然后我使用 jQuery animate 函数进行浮动。 p>

我尝试使用 queue : false 属性。而且我还调用了 .dequeue() 函数，但它不会像我想要的那样工作。

我会很感激任何建议。提前致谢。干杯。

 $('#matrix').animate({
        top: positionTop,
        left: positionLeft,
    });
    $('#matrix').show("scale", { percent: 100, direction: 'both', origin: ['top', 'left'] }, 2000);
    $('#matrix').animate({
        top: positionTopAim,
        left: positionLeftAim
    });

在这里提琴：LINK

Answer 1

    var $matrix = $('#matrix');
    // store original size
    var size = {
        width: $matrix.width(),
        height: $matrix.height()
    };
    $matrix.animate({
        top: positionTop,
        left: positionLeft,
    });
    // Sets the width and height to 0
    $matrix.width(0).height(0).show();

    // animates into original size
    $matrix.animate({
        width: size.width,
        height: size.height
    }, {queue: false});

    $matrix.animate({
        top: positionTopAim,
        left: positionLeftAim
    }, {queue: false});

queue: false 做事

这是workaround

为了进一步使用 jQuery，请避免使用相同的选择器两次/多次。它效率不高。有一个正式的指令将 jQuery 对象存储到名为“$something”的变量中。 欲了解更多信息，请访问this site.

祝你好运；）