How to stop an animate animation with jquery

Question

There are two methods. Execute the turnRight method to control the box to move to the right, and execute the turnLeft method to control the box to move to the left. The box is on the right by default.

function tureRight(){
    $('.k-element-plugs-box').animate({
                marginLeft: "0px"
        },1000,function(){
            console.log("end")
    })
}
    
function tureLeft(eletype){
    $('.k-element-plugs-box').animate({
        marginLeft: "-180px"
    },300)    
 }

In the turnRight method, I added a callback function in the animate animation method to execute console.log("end"). Now there is a problem. When the turnRight method is executed, the box moves to the right for 1 second. Print "end" after the end. If I execute the turnLeft method when the box has not reached the right (that is, the time is not enough for 1 second), it will wait for 1 second before executing the turnLeft method.
If I wrote the JS myself, I know it would be nice to clear the timer, but how does jquery stop the animate animation in turnRight?

Answer 1

$('.k-element-plugs-box').stop();
tureLeft();

Answer 2

$('.k-element-plugs-box').stop().animate(), stop the previous animation first, and then execute the next animation

Answer 3

$('xxx').stop() or $('xxx').stop().animate()
stop()’s specific usage and parameter description can be found in the documentation, it will be explained better