javascript - 仅对最后加载的项目进行动画处理(ajax loadmore)

Question

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

我的问题:

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

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

我真的不知道如何做到这一点，也许有人可以帮助我。

动画类称为:FadeIn

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

Answer 1

1. 熟悉偏移 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)
}