Nur bei zuletzt geladenen Objekten animieren (Ajax ladenmehr)

Question

Ich habe eine Seite, auf der einige Elemente angezeigt werden, wenn Sie eine Taste drücken, werden mehr Elemente geladen. Das gesamte Div-Wrapping der Elemente hat eine Klasse, die es animiert.

Mein Problem:

Wenn Sie die Taste drücken, wird das gesamte Skript erneut durch Ajax geladen (mit einem zusätzlichen Limit in der Abfrage), um alle von ihnen wieder beleben.

Ist es möglich, nur die neu geladenen Objekte zu animieren? Vielleicht indem man zählt, welche neuen Gegenstände geladen sind oder so.

Ich kann nicht wirklich meinen Kopf herum wie dies zu tun, vielleicht kann mir jemand auf dem Weg helfen.

Die belebte Klasse heißt: FadeIn

Mein PHP-Skript:

<?PHP 
class Connection { 
    // Configure Database Vars 
    private $host  = 'localhost'; 
    private $username = 'name'; 
    private $password = 'pass'; 
    private $db_name = 'db'; 
    public $dbase; 

    function __construct() { 
     // Create connection 
     $db = new mysqli($this->host, $this->username, $this->password, $this->db_name); 

     // Check connection 
     if ($db->connect_errno > 0) { 
      die('Unable to connect to the database: '.$db->connect_error); 
     } 

     $this->db = $db; 
    } 

    public function query($query) { 
     $db = $this->db; 
     $this->db->query('SET NAMES utf8'); 
     if (!$result = $this->db->query($query)) { 
      die('There was an error running the query ['.$db->error.']'); 
     } else { 
      return $result; 
     } 
    } 

    public function multi_query($query) { 
     $db = $this->db; 
     if (!$result = $this->db->multi_query($query)) { 
      die('There was an error running the multi query ['.$db->error.']'); 
     } else { 
      return $result; 
     } 

    } 

    public function real_escape_string($value) { 
     return $this->db->real_escape_string($value); 
    } 

    public function inserted_id() { 
     return $this->db->insert_id; 
    } 
} 

$conn = new Connection; 

// Websites 
$web    = "SELECT * FROM `name` WHERE catid = 9 AND state = 1 ORDER BY ordering LIMIT 0,".$_POST['limit'].""; 
$webcon    = $conn->query($web); 
$webcr    = array(); 
while ($webcr[]  = $webcon->fetch_array()); 

foreach($webcr as $website){ 
    $web_images = $website['images']; 
    $web_imgs = json_decode($web_images); 

    if($website['title'] != ''){ 
     if($web_imgs->{'image_intro'}){ 
      $weboverzicht .= ' 
      <div class="col-md-4 wow fadeIn" data-wow-duration="2s" style="padding:0px"> 
       <div class="post"> 
        <div class="post-heading"> 
         <a style="max-height: 220px;" class="post-image" href="'.$website['alias'].'.html"> 
          <img class="websiteimg" src="cms/'.$web_imgs->{'image_intro'}.'" class="" alt="post" /> 
         </a> 
        </div> 
        <div class="post-body" style="min-height:70px;border:none;"> 
         <a href="'.$website['alias'].'.html"><h5>'.$website['title'].'</h5></a> 
         <p class="lijnhoogte">'.strip_tags($website['introtext']).'</p> 
         <p class="bekijkproject2"><a class="infolink" href="'.$website['alias'].'.html">Bekijk project</a></p> 
        </div> 
       </div> 
      </div>';  
     }else{ 
      $weboverzicht .= ' 
      <div class="col-md-4 wow fadeIn" data-wow-duration="2s" style="padding:0px"> 
       <div class="post"> 
        <div class="post-heading"> 
         <a style="max-height: 220px;" class="post-image" href="'.$website['alias'].'.html"> 
          <img class="websiteimg" src="image.jpg" class="" alt="post" /> 
         </a> 
        </div> 
        <div class="post-body" style="min-height:70px;border:none;"> 
         <a href="'.$website['alias'].'.html"><h5>'.$website['title'].'</h5></a> 
         <p class="lijnhoogte">'.strip_tags($website['introtext']).'</p> 
         <p class="bekijkproject2"><a class="infolink" href="'.$website['alias'].'.html">Bekijk project</a></p> 
        </div> 
       </div> 
      </div>';  
     } 
    } 
} 
echo $weboverzicht; 
?> 

Meine Ajax-Datei:

(function(){ 
/* 
Meer websites laden 
*/ 
var limit = 3; 

$('#loadmore').click(function() { 
    limit += 3; 

    ajax(); 

}); 

var posts = document.getElementById('loadnews'); 

function ajax() { 
    $.ajax({ 
    url: 'includes/loadmore.php', 
    type: "POST", 
    data: {limit: limit}, 
    success: function(data){ 
     loadnews.innerHTML = data; 
    }, 
    error: function(jqXHR, exception) { 
       if (jqXHR.status === 0) { 
        alert('Not connect.\n Verify Network.'); 
       } else if (jqXHR.status == 404) { 
        alert('Requested page not found. [404]'); 
       } else if (jqXHR.status == 500) { 
        alert('Internal Server Error [500].'); 
       } else if (exception === 'parsererror') { 
        alert('Requested JSON parse failed.'); 
       } else if (exception === 'timeout') { 
        alert('Time out error.'); 
       } else if (exception === 'abort') { 
        alert('Ajax request aborted.'); 
       } else { 
        alert('Uncaught Error.\n' + jqXHR.responseText); 
       } 
      } 
    }); 
} 

ajax(); 
}()); 

Answer 1

1. vertraut mit Offset http://www.w3schools.com/php/php_mysql_select_limit.asp

2.

success: function(data){ 
    var newWrapper = document.createElement('div') 
    //add class to newWrapper or whatever 
    newWrapper.innerHTML=data; 
    loadnews.appendChild(newWrapper) 
}