CODEWITHSUNDEEP
javascriptjquerydom
timpone
timpone

Reputation: 19969

how to capture an event on loading external html via AJAX

Not full-time javascript dev. I'm loading some external html via AJAX / JSON as a string and then placing it in the DOM.

The json will look like this:

  {
    user_ids:[2,4,7],
    html:"<div class='show-fade-in' >here is text</div>"
   }

I'd like to give the user some feedback by animating in the effect so that they will notice it rather than having it just appear which might make them miss it. I would like to use a technique similar to this: http://jsfiddle.net/SO_AMK/a9dnW/3/ linked to via https://stackoverflow.com/a/11681331/152825 . My question is how would I capture the event of loading the external json and putting into the DOM so that we can start the animation in the element 'show-fade-in'.

I'll be adding the html via something like:

so:

$.get('/arc/external-info',function(){},'json'
).done(function(r){
   $('#item-editing').append(r.html);
    // EDIT #1 this doesn't word
    $( ".show-fade-in" ).fadeIn( "slow", function() {
      alert('fade-in complete');
    });

})

thx for any help

Upvotes: 1

Views: 107

Answers (1)

cocco
cocco

Reputation: 16706

Simple fade in

There is noo need to know to know when it's done if you use keyframes. As soon as you append the element it does the animation

div.myAjax{
 -webkit-animation:x 700ms ease;
 opacity:1;
}
@-webkit-keyframes x{
 0%{opacity:0;}
 100%{opacity:1;}
}
 /*add -webkit,-moz,-ms,-o for more support.*/

DEMO

http://jsfiddle.net/rU9yN/

If you have any questions just ask .. if i misunderstood your question tell me so i reelaborate the code.

Upvotes: 1

Related Questions