Question

If user decides remove an item, my app starts an animation:

    $(data.args[0]).parents('li').hide(20000, function() {
        alert('the end')
    });

If at the middle the user clicks on a panic button because he thinks this item should not be deleted, the app stops this animation:

    $(data.args[0]).parents('li').stop();

The problem is that the item is still showed but it is semi-transparent. How to make it return to its original state? I already tried chaining a .fadein() and a .show() without success. Also tested all parameter combinations for .stop()

This is the original code:

$("#task-list").jstree({
    "plugins" : [ "themes", "ui", "html_data", "checkbox", "sort" ]
}).bind('check_node.jstree', function(e, data) {
    $(data.args[0]).parents('li').hide(10000, function() {
        var tid = this.id.split('-')[1];
        ajaxCall('delete_item', {id: tid})
    });
}).bind('uncheck_node.jstree', function(e, data) {
    $(data.args[0]).parents('li').stop(true, false);
});

Answer 1

At the end, I resolved the problem. First I start the animation using the .animate() method:

    $(data.args[0]).parents('li').animate({
        opacity: "hide"
    }, {
        queue: false,
        duration: 20000
    });

Then, I had to use a trick to make it work:

    $(data.args[0]).parents('li').stop().css('opacity', '1');

Note the css applied here makes the item to show as it was originally.