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

Question

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

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

Благодаря

Answer 1

Скрыть() является функцией JQuery, а это означает, что работает только на объект JQuery, так что вы должны сначала вводить HTML в DOM, а затем вызвать шкурку() на элемент 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 
}); 

Answer 2

Следующее сделает вызов 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 3

Я бы предпочел положить возвращаемое значение внутри 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 }); 
        }); 
    } 
    ... 
});