Выберите теги в строке, используя jQuery

Question

Мой сайт получает значение в результате вызова ajax. После этого я хотел бы вставить этот результат (строку) в тег. Тем не менее, я хотел бы вставить этот результат таким образом, чтобы (1) он имел непрозрачность = 0, затем (2) он будет slideDown (), так что весь список контента был сдвинут с помощью анимации, и, наконец, (3) изменил непрозрачность = 1. Представьте, что это похоже на процесс вставки списка сообщений Facebook

Способ, которым я планирую это сделать, - сначала вернуть строку результата из ajax в opacity = 0. Однако я не знаю, как использовать jQuery для выбора тега в строке. Я знаю, JQuery только выбрать из DOM. Так как это сделать? Любой совет?

Спасибо

Answer 1

Следующее вызовет ajax с помощью простой оболочки .get ().

Затем функция обратного вызова загрузит ответ в объект jquery и найдет нужный тег.

Затем он скрывает этот тег и добавляет его в контейнер div.

Наконец он опустится.

//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 2

Я бы посоветовал поместить возвращаемое значение в SPAN. Скрыть контейнер, который будет держать его. Установите непрозрачность SPAN на 0, затем добавьте результат к нему и поместите его в контейнер. Как только это будет сделано, сдвиньте контейнер вниз и анимируйте, показывая результат обратного вызова метода slideDown.

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

Answer 3

Hide () - это функция jquery, что означает, что она работает только с объектом jquery, поэтому сначала нужно ввести html в DOM, а затем вызвать hide () для элемента DOM.

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