Как повлиять на стиль CSS на jQuery .live элементы при загрузке страницы

Question

Привет всем.У меня есть несколько элементов на странице, созданной в результате вызова json/ajax.Сначала они не запускали функции jQuery, затем я узнал о .live(), который решил мою проблему.

Но теперь я хочу делать небольшую анимацию при каждой загрузке страницы.(или меняется, так как я делаю это через json).
Может кто-нибудь сказать, пожалуйста, как сделать что-то подобное, например, но вместо "click", используя что-то вроде "onload" или "load "?

$('.thumbnail_area').live("click",function(){
    $(this).children().css('background-color', 'red')
});

Я просто использую это как простой пример.Это хорошо работает при нажатии, но как я могу заставить его делать это каждый раз при загрузке divs.Конечная цель - заставить их исчезать по одному.
Спасибо всем.

Answer 1

На самом деле нет общей функции onload() jQuery. Вам нужно будет использовать функцию обратного вызова для запроса AJAX, как вы можете видеть здесь:

jQuery.post (url, [data], [success (data, textStatus, jqXHR)], [dataType])

Блок [ success(data, textStatus, jqXHR) ] говорит, что вы можете поместить туда функцию с этими необязательными переменными, например, так:

jQuery.post('foo.php', $('#foo_form').serialize(), function(data)
{
  // I get called when the AJAX request finishes, so do your animating within me.
});

---

.getJSON() работает так же:

jQuery.getJSON('foo.php', 'foobar', function(data)
{
  $('.thumbnail_area').css('background-color', 'red');
});

Если вы используете jQuery (а не jQuery UI), вам нужно будет подключить плагин цвета , такой как этот , чтобы анимировать цвета элементов.

Answer 2

Привет всем.Большое спасибо за вашу помощь.Теперь я понимаю, что все пошло не так.Я динамически создавал и добавлял div, затем пытался повлиять на их CSS.

Когда мне действительно нужно было поместить все мои изменения в файл getJSON.В противном случае любые изменения, которые я делал, имели место, но затем мгновенно возвращались назад, когда добавлялись новые div.

Еще раз спасибо за вашу помощь.

Answer 3

У вас уже есть функция «result», используемая в качестве обратного вызова. Разве вы не можете просто ".hide ()" div с идентификатором "id = '" + result [i] .bridge + "'", а затем использовать функцию fadeIn? Примерно так же сразу после функции .append ():

        $('#'+result[i].bridge).hide();
        $('#'+result[i].bridge).fadeIn();

Да, это не имеет ничего общего с javascript из jQuery, но вы никогда не должны использовать числа в качестве идентификаторов, так как это вызывает ошибки проверки W3C. Вы можете назвать их как «id = 'newdiv _" ++ result [i] .bridge + "'", а затем получить значение id, разделив символ "_".

var sId = $(somediv).attr('id');
var actualID = sId.split('_')[1];