javascript - 如何使用 jQuery 同时制作 2 个动画

Question

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

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

我尝试使用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.

祝你好运;)