使用jQuery在活动源中创建“下推”效果

时间:2013-09-23 12:49:28

标签: jquery

所以我使用JSON和jQuery将新活动拉入活动供稿。我正在寻找最新的条目来“推倒”以前最新的条目。任何提示非常感谢:D

Feed的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's supposed to be
        }
  spot.prepend(entry); //Finish off by prepending the new entry to the top of the feed
}

1 个答案:

答案 0 :(得分:1)

spot.prepend(entry)返回activityspot,hide和fadeIn将应用于activityspot。

当你将它应用到最新的条目时,首先你必须选择最新的条目,然后像这样应用hide和fadeIn

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

调用first(),因为您在前面添加元素,因此假设最新的条目是类“entry template”的activityspot的第一个子元素