Select tags within a string using jQuery

Question

Hi all,

I have my website getting a value as a result of an ajax call. After that, I would like to insert that result (a string) into a tag. However, I would like to insert that result in a way that (1) it must have opacity = 0, then (2) it will slideDown() so the whole content list being pushed down using animation, and finally (3) change opacity = 1. Imagine this is just like a Facebook message list insert process

The way I am planning to do this is to return the result string from ajax to opacity=0 first. However, I don't know how to use jQuery to select a tag from within a string. I know jQuery only select from the DOM. So how to do this? Any advice?

Thanks

Answer 1

Hide() is a jquery function, meaning that only works on a jquery object, so you have to first inject the html in the DOM, and then call hide() on the DOM element.

$('#msgList').load (url,data,function(html){
var $this = $(this); // cache $(this) for performance
$this.hide().html(html); // inject the html in the DOM
$('#aa', $this).hide(); // hide #aa
$this.show(); // reveal the messageList
});

Answer 2

The following will make the ajax call using the simple .get() wrapper.

Then the callback function will load the response into a jquery object and find the tag you want.

It then hides this tag and appends it to a div container.

Finally it will slide it down.

//do ajax call
$.get( url, function(html) {

    //load html into a jQuery object, find the tag by id then hide it
    var $el = $(html).filter('#someId').hide();
    //append element to the dom and slide it down
    $el.appendTo('#someDiv').slideDown('slow');   

});

Answer 3

I'd consider putting the return value inside a SPAN. Hide the container that will hold it. Set the opacity of the SPAN to 0, then add the result to it and put it in the container. Once that is done, slide the container down and animate showing the result in the callback to the slideDown method.

$.ajax({
   ...
   success: function(data) {
         var container = $('#container').hide();
         $('<span />').css( 'opacity', 0 )
                      .html(data.result)
                      .appendTo(container);
         container.slideDown('normal', function() {
                       $(this).( 'span:first' )
                              .animate( { 'opacity': 1.0 } );
                   });
   }
   ...
});