CODEWITHSUNDEEP
jquery
petko3000
petko3000

Reputation: 1

jQuery .after with effect

i would like to ask, if is it possible to use .after function in correlation with some effect like fadeIn or so.

The whole flow should work like this:

  1. get some AJAX content depend on user action (.click or so)
  2. render response html right after current element

I already try to mix .get, .after, .show or .fadeIn methods, but without success.

Any help is highly appreciated.

Upvotes: 0

Views: 3488

Answers (4)

Michael Antonius
Michael Antonius

Reputation: 62

It's easy

jQuery.ajax({
url:"//Your URL//"
success: function(response){
jQuery(".defineYOURSELECTOR").after(jQuery(response).fadeIn());
}
});

Upvotes: 3

lonesomeday
lonesomeday

Reputation: 237905

There isn't a native way to do this, but how about this...

var target = $('#someEl'); // existing element
$.get('example.php', function(response) {
    var newEl = $(response);
    newEl.hide().insertAfter(target).slideDown('slow');
});

This uses the following jQuery functions:

Basically, the idea is to construct the element before you insert it into the document (using the jQuery constructor $), then insert it, then show it.

Upvotes: 1

Jon
Jon

Reputation: 437434

You should be able to do it like this:

$('<div></div>').hide().html(ajaxResult).insertAfter(target).fadeIn();

ajaxResult is the HTML that came back from the server, target is your "current" element (after which the new one will be inserted).

Upvotes: 0

Tejs
Tejs

Reputation: 41246

Sure, you can simply do that in the callback:

$.ajax({
   type: 'get',
   url: 'Some\Url',
   data: { prop: 'someData' },
   success: function(response)
   {
        var element = $('<div/>');
        element.html(response);
        element.hide();

        $('#someElement').after(element);
        element.fadeIn();
   }
});

Get the data. Setup the UI, insert that hidden, and then call FadeIn on that item.

Upvotes: 1

Related Questions