Question

How to stop an animation and resume later with jQuery?

For example, I’ve this and i want to avoid the slide-up if the user is dragging another item.

example here

Answer 1

Have a look here jQuery stop()

That’ll do what you need.

Edit: I’ve had a look at the code and I think i’ve got it.
I’ve added some boolean variables to check against to determine whether the a slideUp should occur.

$(function() {
    var item = $("#items .item");
    var slider = $(".slider");
    var droppable = $("#favorite");
    var dropComplete = false;
    var dragging = false;

    item.draggable({
        opacity: 0.75,
        helper: "clone",
        start: function() {
            // set variables for drag and drop.
            dropComplete = false;
            dragging = true;
            slider.slideDown().clearQueue();
        },
        stop: function(){
            // drag has been abandoned.
            dragging = false;

            setTimeout(function () { 
             if (dragging === false && dropComplete === false){
                 slider.clearQueue().slideUp();
             } 
             }, 3000);

            }

    }).disableSelection();

    droppable.droppable({
        tolerance: 'pointer',
        drop: function(event, ui) {  
            $('.last.item').replaceWith($(ui.draggable).clone().addClass('last'));
            //alert(ui.draggable.attr('id').substring(6));
            // drop is complete.
            dropComplete = true;

         setTimeout(function () { 
             if (dropComplete === true){
                 slider.clearQueue().slideUp();
             } 
         }, 3000);

        }
    });
});