jquery - 用 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

---