Adding animation to ajax

Question

Hi I am trying to add an animation such as fade in/fade out or slide to .load . I have attached a fiddle of the basic structure but firstly my ajax calls are not working on fiddle (I tried full urls) but they work on the test site.

I tried adding .fade() to the end of the function but this doesn't seem to work.

Does anyone have any ideas?

            $(".vCard").click(function(){
                $("#mainContent").load("ajax/vCard.php").fade();
            });

http://jsfiddle.net/craigie2204/mhUx7/

If you want to mimic ajax calls in jsFiddle, you will need to modify your URLs to point to jsFiddle's own. See here: doc.jsfiddle.net/use/echo.html — FixMaker
– FixMaker, Commented Oct 21, 2013 at 9:19

Jai · Accepted Answer · 2013-10-21 09:57:38Z

3

You can do one thing just .hide() it first then add the .fadeIn():

change to this:

 $("#mainContent").load("ajax/vCard.php").hide().fadeIn();

or better to hide it with css and just add the .fadeIn():

CSS:

#mainContent{
   display:none;
}

jQuery:

 $("#mainContent").load("ajax/vCard.php").fadeIn();

But you have to do within the callback handler in the .load() method of jquery:

$("#mainContent").load("ajax/vCard.php", function(){
    $(this).fadeIn(); // this will be animated when load gets completed.
});

edited Oct 21, 2013 at 9:57

answered Oct 21, 2013 at 9:29

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

marquez Over a year ago

how can it works if load() make an async request? The fadeIn() call should be set as callback of the load() function. Here the documentation api.jquery.com/load . If you are trying in local environment the response could be so fast that seems to work because the delay of the fadeIn() function gives you the illusion that it is triggered after the content is loaded, but it isn't.

Jai Over a year ago

@marquez you are right, this should be done exactly the way you suggested, What seem to me that op is perhaps doing something like this, anyway this should be done the way you suggested and i just updated the answer.

marquez Over a year ago

@Jai glad to help! Maybe an upvote could be really appreciated!

Jai Over a year ago

It seems you didn't posted an answer here.

craigie2204 Over a year ago

Thanks guys, yes I was happy with the answer Jai gave but knew that it needed some tinkering but was happy to do this myself, it was the best overall answer. Thank you for your input Marquez

Community · Accepted Answer · 2017-05-23 12:34:23Z

0

Try .fadeIn(1500)

That should work

Resources

where do i put jQuery .fade() function in ajax success callback?

http://api.jquery.com/fadeIn/

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Oct 21, 2013 at 9:18

Henk Jansen

1,1508 silver badges27 bronze badges

3 Comments

craigie2204 Over a year ago

Hi thanks I tried this but I think because Ajax is async it is loading before it comes on to the page and the animation is already done

Henk Jansen Over a year ago

use the .success on the ajax as provided in another answer in combination with the fadeIn

craigie2204 Over a year ago

Thanks for your reply but this doesn't work. I am getting no javascript errors but the animation is not working.

Tim Lee · Accepted Answer · 2013-10-21 09:21:24Z

0

$(".vCard").click(function(){
    var _div = $("#mainContent");
    _div.load("ajax/vCard.php",function(){
        _div.fade();
    });
  });

Blockquote

answered Oct 21, 2013 at 9:21

Tim Lee

1

1 Comment

craigie2204 Over a year ago

Thanks for your reply but this doesn't work. I am getting no javascript errors but the animation is not working.

H4mm3R · Accepted Answer · 2013-10-21 09:23:53Z

0

you should use ajax function, so you can use different statut like :

$.ajax({
   type: "GET",
   url: url, //Set you url here
   data: getData,
   dataType: "html",
   success: function(data) {
      $(this).fadeIn(400); //When you loaded your ajax page, Fade In to show. If you want to parse what you get use '.html(data)'
   }
});

answered Oct 21, 2013 at 9:23

H4mm3R

3454 silver badges15 bronze badges

2 Comments

craigie2204 Over a year ago

Does this go inside the .click function?

H4mm3R Over a year ago

Yes ! You can put this function in your click

Collectives™ on Stack Overflow

Adding animation to ajax

4 Answers 4

5 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related