Question

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

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

我尝试使用 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对象存储到名为＆＃34; $ something ＆＃34;的变量中。有关更多信息，请访问this site.

祝你好运;）

如何使用jQuery一次完成2个动画

1 个答案: