仅对上次加载的项进行动画处理(ajax loadmore）

我得到了一个页面，其中显示了一些项目，当你按下按钮时，会加载更多的项目。包裹项目的整个div有一个类，使其具有动画效果。

我的问题：

当您按下该按钮时，整个脚本将通过ajax再次加载(在查询中添加了限制(，因此所有脚本都将再次动画化。

是否可以仅使新加载的项目具有动画效果？也许是通过计算加载了哪些新项目之类的。

我真的不知道该怎么做，也许有人能在路上帮我。

动画类被称为：淡入

我的php脚本：

<?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;
?>

我的ajax文件：

(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();
}());

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