将动画添加到ajax

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/

Try .fadeIn(1500)

That should work

Resources

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

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

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

Blockquote

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)'
   }
});

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.
});