rotate with jquery then do something else

Question

I'm trying to rotate an element with jquery and then I want to do something else when its done. The rotate is working but why not the alert?

see 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");
    });
}

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

You can update to this:

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

Demo

Your updated 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').promise().done(function () { // update like this
        alert("E");
    });
}

With use of `complete:fn` callback:

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

@mostafaznv You are welcome, glad this is somehow helped you too. — Jai, Jun 09 '14 at 10:33
yes ... it was wonderful. can we do that through jquery queue? — mostafaznv, Jun 09 '14 at 10:36
no ... but i have many problems with `queue` ... and it is very useful for me . i want to know how we can execute several functions through `queue` — mostafaznv, Jun 09 '14 at 10:41

morric · Answer 2 · 2014-06-09T10:45:57.693

0

Try removing the second 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");
}

(I've also added a ; after your element.animate().)

Edit:

You can delay the alert with a setTimeout() something like this:

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

(From the most recent answer in the question I linked to in the comments.)

edited Jun 09 '14 at 10:45

answered Jun 09 '14 at 10:14

morric

1,189
1
13
17

1

This will alert at the same time as the animation, not after it's finished. – Novocaine Jun 09 '14 at 10:22
Apologies, my mistake. I'm used to situations where the first function completes before the alert is called. Looks like I need to do more research about synchronous and asynchronous execution (such as read this other stackoverflow question: http://stackoverflow.com/questions/5187968/how-should-i-call-3-functions-in-order-to-execute-them-one-after-the-other). – morric Jun 09 '14 at 10:39

rotate with jquery then do something else

2 Answers2

Demo

Your updated function:

With use of complete:fn callback:

Demo with complete:fn callback

With use of `complete:fn` callback:

Demo with `complete:fn` callback