用jquery旋转然后做其他事情

时间:2014-06-09 10:04:43

标签: jquery html css jquery-animate

我正在尝试使用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");
    });
}

2 个答案:

答案 0 :(得分:5)

您可以更新为:

.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


答案 1 :(得分:0)

尝试删除第二个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);

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