jQuery: Fade not working

Question

For some reason, jQuery's fade effect isn't working. Could it be because of my code, or could it possibly be a browser incompatibility issue?

This function does everything it is supposed to, aside from the fading. It gets called at the correct time.

function move_to_term(original_course, helper, term) {

    var cloned_course = original_course.clone(true);

    original_course.addClass('already-scheduled').droppable("destroy");

    helper.fadeOut(function() {
        cloned_course.appendTo(term).attr('style', '').fadeIn("slow");
    });

    cloned_course.draggable();
}

UPDATE: It fails in both FF 3.5.9 and IE 8.

UPDATE 2:

This function is set to be a callback for a droppable's drop event:

        var new_term = $(sprintf('<li class="term"><strong>%s</strong></li>', term["fields"]["name"]));

        new_term.data('pk', term['pk']);

        new_term.droppable({
            drop: function(event, ui) {
                move_to_term(ui.draggable, ui.helper, $(this));
            },
            accept: function(draggable) {
                return legal_for_term(draggable, $(this))
            },
            tolerance: 'pointer',
            activeClass: 'legal-drop-term-active',
            hoverClass: 'legal-drop-term-hover'
        });

UPDATE 3: The text does take a little while to change places, as if the fade is happening but just not being animated? Or maybe I'm totally off on that.

UPDATE 4: This works just fine, although it doesn't accomplish the effect I'd hoped for:

function moveToTerm(original_course, helper, term) {

    original_course.fadeOut('slow');

}

Here is the droppable HTML:

<li class="term ui-droppable">
      <strong>Fall 2010</strong>
      <li class="course">Computing Cultures</li>
</li>

Here is the draggable HTML:

<li class="course ui-draggable">Introduction to Web Design</li>

Is fading not supported on ui.helper objects?

UPDATE 5: Ok, now all I want to do is to fade in the cloned object:

function moveToTerm(original_course, helper, term) {

    var cloned_course = original_course.clone(true);

    original_course.addClass('already-scheduled');

    original_course.draggable("disable");
    cloned_course.draggable();

    cloned_course.appendTo(term).fadeIn("slow");
}

This doesn't work, but changing fadeIn() to fadeOut() makes it work. Why?

FIXED:

Change:

    cloned_course.appendTo(term).fadeIn("slow");

to:

    cloned_course.appendTo(term).hide().fadeIn("slow");

Answer 1

Try this:

helper.fadeOut('slow', function() {
    cloned_course.appendTo(term).attr('style', '').fadeIn("slow");
});

Could it be because of the code?

Jquery library's code, no, it couldn't (of course).

Without know how the context of execution of your code, I can't give any more help.

Answer 2

I would try calling it without the attr('style', '') call. I would imagine that could definetely interfere with fade, since fade works by setting inline css of opacity (plus some further magic for ie).

Edit

It's hard to tell (since I can't really test it and the description could be clearer). Wouldn't chaining in a hide() help?

cloned_course.appendTo(term).attr('style', '').hide().fadeIn("slow");