-3

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");
3
  • 2
    Without any knowledge of what you're passing in here, this is impossible to answer... May 11, 2010 at 23:58
  • "Could it be because of the code?" I daresay, as jQuery's 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. May 12, 2010 at 0:06
  • Which fade wasn't working? Is there any chance that you are appending the clone of the element into the same container as the original? If so, and if the original has absolute positioning, then could it be that they are essentially stacked, therefore obscuring the effect of the fade?
    – user113716
    May 12, 2010 at 23:34

2 Answers 2

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.

3
  • That shouldn't be it. fadeOut() will work fine taking a callback as the only parameter.
    – user113716
    May 12, 2010 at 0:01
  • @patrick is correct - .fadeOut(func) is really ``.animate({ opacity: "hide" }, func)`, which is handled. May 12, 2010 at 0:05
  • Yeah, that doesn't fix the problem. May 12, 2010 at 0:18
0

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");
5
  • That shouldn't be it. attr('style','') is called on a separate element. There wouldn't be any cross-effect.
    – user113716
    May 12, 2010 at 0:04
  • @patrick: "[It's] called on a separate element" It is? Looks chained to me, whatever attr is being applied to is also what fadeIn is being applied to. Not saying Jakub's right that that's what's wrong, but... May 12, 2010 at 0:10
  • Yeah removing .attr('style', '') doesn't solve the problem. May 12, 2010 at 0:15
  • @T.J. Crowder - You (and Jakub Hampl) are (potentially) right. I somehow assumed the OP was talking about the .fadeOut(). Since the OP says it is doing everything right, except fading, it would seem safe to assume that the initial fade required for the callback isn't working. Unclear though. Thanks for the correction, though.
    – user113716
    May 12, 2010 at 0:15
  • It would help if you could add a minimum reasonable version into something like jsbin.com and paste a link. May 12, 2010 at 0:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.