jQuery: Fade not working
<p>For some reason, when I call jQuery's fade effect, it doesn't work. What am I doing wrong?</p>

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

<pre><code>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();
}
</code></pre>

<p><strong>UPDATE:</strong> It fails in both FF 3.5.9 and IE 8.</p>

<p><strong>UPDATE 2:</strong></p>

<p>This function is set to be a callback for a droppable's <code>drop</code> event:</p>

<pre><code>        var new_term = $(sprintf('&lt;li class="term"&gt;&lt;strong&gt;%s&lt;/strong&gt;&lt;/li&gt;', 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'
        });
</code></pre>

<p><strong>UPDATE 3</strong>: 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.</p>

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

<pre><code>function moveToTerm(original_course, helper, term) {

    original_course.fadeOut('slow');

}
</code></pre>

<p>Here is the droppable HTML:</p>

<pre><code>&lt;li class="term ui-droppable"&gt;
      &lt;strong&gt;Fall 2010&lt;/strong&gt;
      &lt;li class="course"&gt;Computing Cultures&lt;/li&gt;
&lt;/li&gt;
</code></pre>

<p>Here is the draggable HTML:</p>

<pre><code>&lt;li class="course ui-draggable"&gt;Introduction to Web Design&lt;/li&gt;
</code></pre>

<p>Is fading not supported on <code>ui.helper</code> objects?</p>

<p><strong>UPDATE 5</strong>: Ok, now all I want to do is to fade in the cloned object:</p>

<pre><code>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");
}
</code></pre>

<p>This doesn't work, but changing <code>fadeIn()</code> to <code>fadeOut()</code> makes it work. Why?</p>

<p><strong>FIXED:</strong></p>

<p>Change:</p>

<pre><code>    cloned_course.appendTo(term).fadeIn("slow");
</code></pre>

<p>to:</p>

<pre><code>    cloned_course.appendTo(term).hide().fadeIn("slow");
</code></pre>
