fade in after ajax call

Question

I have the following code and try to make the result of the ajax fade in

$.post('e.php', {term: $(this).text()} , function(data) {
                $('#dictionary').html(data).fadeIn("slow");
})

This is not working. How I must edit it, to make the results fade in the div?

Thanks in advance

EDIT

Everything works fine, except the effect, it doesnt take place. I see the results appear in the div, not fade in it.

Define "not working." What *is* it doing? Is the AJAX request made at all? Does the response have what you expect? Is the target element (`#dictionary`) found? Is its HTML set? Does any fade effect take place? Where *specifically* does it fail? — David, Jul 06 '14 at 23:49
What is the state of the styling for the `#dictionary` element before this code executes? Is it visible? (Even if it's empty?) — David, Jul 06 '14 at 23:54

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

It may have to do with the fact that #dictionary might be visible before the fadeIn() call. See this question.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 06 '14 at 23:57

rgajrawala

2,148
1
22
35

score 0 · Answer 2 · answered Jul 07 '14 at 00:10

In response to your comment:

@David yes it is visible

What do you expect .fadeIn() to do on an element that's already visible? There's nothing to "fade in." The element needs to be hidden first. Either style it to be hidden by default via CSS:

#dictionary {
    display: none;
}

Or hide it inline with the JavaScript code:

$('#dictionary').hide().html(data).fadeIn("slow");

fade in after ajax call

2 Answers2