CODEWITHSUNDEEP
jqueryajax
Chris J Allen
Chris J Allen

Reputation: 19207

Making my ajax updated div fade in

I have this code that performs an ajax call and loads the results into two duplicate divs every time a dropdown is changed. I want the results to be faded into the div, to give a more obvious indication that something has changed, as its so seamless its sometimes hard to notice the change!

print("$('.ajaxdropdown').change(function(){


        $.ajax({
            type: "GET",
            url: "/includes/html/gsm-tariff.php",
            data: "c_name="+escape($(this).val()),
            success: function(html){
                $("#charges-gsm").html(html);
                                    //i want to fade result into these 2 divs...
                $("#charges-gsm-faq").html(html);
                $("#charges-gsm-prices").html(html);
            }
        });
    });");

I've tried appending the fadein method and a few other things, but no joy.

Upvotes: 28

Views: 39121

Answers (5)

Brynner Ferreira
Brynner Ferreira

Reputation: 1576

It works with load(): 

$('.element').load('file.html').hide().fadeIn();

Upvotes: 1

kingr
kingr

Reputation: 41

You'll have to hide() it before you can use fadeIn()

Above worked for me

Upvotes: 2

Malfist
Malfist

Reputation: 31785

JQuery.ui has a bunch of different things you can do with effects. You can find them here: http://docs.jquery.com/Effects

Upvotes: 0

Adam Bellaire
Adam Bellaire

Reputation: 110429

You'll have to hide() it before you can use fadeIn().

UPDATE: Here's how you'd do this by chaining:

$("#charges-gsm-faq").hide().html(html).fadeIn();
$("#charges-gsm-prices").hide().html(html).fadeIn();

Upvotes: 50

Adam Bellaire
Adam Bellaire

Reputation: 110429

You could also leave it visible and just make it transparent, and then fade it to full opacity, using:

... .css({ opacity: 0 }).fadeTo("normal",1);

Upvotes: 4

Related Questions