For some reason, when I call jQuery's fade effect, it doesn't work. What am I doing wrong?
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");
fadeIn
isn't just fundamentally broken. A bit more context, as Nick says, would be key to getting help. A minimalist failing test case, for instance.