用jquery旋转然后做其他事情

Question

我正在尝试使用jquery旋转元素，然后我想在完成时执行其他操作。 旋转正在工作，但为什么不警报？

请参阅jsfiddle：JSFiddle

HTML：

<div class="square">click me</div>

CSS：

.square{
background:red;
height:100px;
width:100px;
cursor:pointer;

}

JS：

$('.square').click(function () {
  rotate($(this), -180, 1000);
});
function rotate(element, degrees, speed) {
    element.animate({ borderSpacing: degrees }, {
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
            $(this).css('transform', 'rotate(' + now + 'deg)');
        },
        duration: speed
    }, function () {
        alert("I'm done");
    });
}

Answer 1

您可以更新为：

.promise().done(function () {
    alert("E");
 });

---

Demo

---

您的更新功能：

function rotate(element, degrees, speed) {
    element.animate({
        borderSpacing: degrees
    }, {
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
            $(this).css('transform', 'rotate(' + now + 'deg)');
        },
        duration: speed
    }, 'linear').promise().done(function () { // update like this
        alert("E");
    });
}

---

使用complete:fn回调：

---

function rotate(element, degrees, speed) {
    element.animate({
        borderSpacing: degrees
    }, {
        duration: speed,
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
            $(this).css('transform', 'rotate(' + now + 'deg)');
        },
        complete: function () {
            alert("E");
        }
    });
}

---

Demo with complete:fn callback

---

Answer 2

尝试删除第二个function()：

function rotate(element, degrees, speed) {
    element.animate({ borderSpacing: degrees }, {
        step: function (now, fx) {
            $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
            $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
            $(this).css('transform', 'rotate(' + now + 'deg)');
        },
        duration: speed
    }, 'linear');

    alert("E");
}

（我还在;之后添加了element.animate()。

修改

您可以使用setTimeout()这样的内容延迟提醒：

window.setTimeout(function() {
    alert("E");
}, 1000);

（来自我在评论中链接的问题中的最新答案。）