Создайте эффект «push down» в фиде активности с помощью jQuery

0

поэтому я использую JSON и jQuery для переноса новых действий в фид активности. Я ищу последнюю запись, чтобы "нажать" предыдущую запись. Любые советы, которые были высоко оценены: D

Структура HTML фида:

    <div id="activityspot">
        <div class="entry template">
            <div class="actProfilePic"></div>
            <div class="actMessage"></div>
            <div class="actName"></div>
            <div class="actContent"></div>
            <div class="actImage"></div>
        </div>
    </div>

JQuery:

for (var j = 0; j < jsonData.items.length; j++) {
  var entryData = jsonData.items[j];
  var entry = template.clone();
  entry.removeClass("template");

  entry.find(".message").text(entryData.statusid); 
  entry.find(".actName").text(entryData.name); 
  entry.find(".actContent").text(entryData.content);

  //get the users ProfilePic
  var profileImg = $("<img />");
  profileImg.attr("src", "./img/" +entryData.profilePic);
  profileImg.addClass("feed-user-img");
  entry.find(".actProfilePic").append(profileImg);

  //Get user-uploaded images.
  entry.find(".actImage").text(entryData.imageKey);
  if (entryData.imageKey != "") 
        {
          var img = $("<img />"); // Create the image element
          img.attr("src", "http://spartadev.s3.amazonaws.com/" + entryData.imageKey); // Set src to the s3 url plus the imageKey
          entry.find(".actImage").append(img); // Append it to the element where it supposed to be
        }
  spot.prepend(entry); //Finish off by prepending the new entry to the top of the feed
}
Теги:

1 ответ

1
Лучший ответ

spot.prepend(entry) возвращает активность, а hide и fadeIn будут применены к Activityspot.

когда вы применяете его к последней записи, сначала вам нужно выбрать последнюю запись, а затем применить hide и fadeIn, как это

spot.prepend(entry);
spot.find(".entry.template").first().hide().fadeIn();

first() вызывается, поскольку вы добавляете элемент таким образом, считая, что последняя запись является первым дочерним элементом Activityspot класса "шаблон ввода",

  • 0
    Это сработало, спасибо! Это немного неуклюже с fadeIn - я мог бы также попробовать slideDown :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню