1

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/

1
  • 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 Commented Oct 21, 2013 at 9:19

4 Answers 4

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.
});
Sign up to request clarification or add additional context in comments.

5 Comments

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.
@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.
@Jai glad to help! Maybe an upvote could be really appreciated!
It seems you didn't posted an answer here.
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
0

Try .fadeIn(1500)

That should work

Resources

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

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

3 Comments

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
use the .success on the ajax as provided in another answer in combination with the fadeIn
Thanks for your reply but this doesn't work. I am getting no javascript errors but the animation is not working.
0
$(".vCard").click(function(){
    var _div = $("#mainContent");
    _div.load("ajax/vCard.php",function(){
        _div.fade();
    });
  });

Blockquote

1 Comment

Thanks for your reply but this doesn't work. I am getting no javascript errors but the animation is not working.
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)'
   }
});

2 Comments

Does this go inside the .click function?
Yes ! You can put this function in your click

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.