Question

我正在使用带有AJAX的Isotope来引入WordPress中的一些帖子，几乎一切都在那里，除了默认的Isotope动画在我内容中的AJAX时运行，这看起来有点奇怪。我仍然希望它在过滤时动画。

所以我认为我可以在我的AJAX函数中使用add / removeClass在需要时关闭/打开它，但如果我这样做动画永远不会运行。

我在这里出错的任何想法？

var page = 1;
var loading = true;
var $window = $(window);
var $content = $('.isotope');

if( $('body').hasClass('home') ) {
    var loopHandler = '/inc/loop-handler.php';
} else {
    var loopHandler = '/inc/loop-handler-archive.php';
}

var load_posts = function(){
        $.ajax({
            type       : "GET",
            data       : {numPosts : 1, pageNumber: page},
            dataType   : "html",
            url        : templateDir+loopHandler,
            beforeSend : function(){
                if(page != 1){
                    $('.loader').append('<div id="temp_load" style="text-align:center; z-index:9999;">\
                        <img src="'+templateDir+'/img/ajax-loader.gif" />\
                        </div>');
                }
            },
            success    : function(data){

                $data = $(data);
                if($data.length){

                    var itemHeight = $('.item').height();
                    var height = $content.height()+itemHeight*2;


                    $content.append($data);

                    $content.css('min-height', height);

                    $data.hide();

                    // should stop the animation
                    $('.isotope').addClass('no-transition');

                    $content.isotope('destroy');

                    $content.imagesLoaded( function(){

                        $content.isotope({
                          // options
                          layoutMode: 'fitRows',
                          itemSelector : '.item'
                        });

                    });

                    $data.fadeIn(700, function(){
                        $("#temp_load").fadeOut(700).remove();
                        loading = false;
                    }); 

                    // should start up the animation again
                    $('.isotope').removeClass('no-transition');

                    $content.css('min-height', '0');



                } else {
                    $("#temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
    });
}


$window.scroll(function() {
    var content_offset = $content.offset(); 
    console.log(content_offset.top);
    if(!loading && ($window.scrollTop() + 
        $window.height()) > ($content.scrollTop() +
        $content.height() + content_offset.top)) {
            loading = true;
            page++;
            load_posts();
    }
});
load_posts();

如果您需要任何HTML / PHP，我很乐意发布它。此外， here's the dev site 如果您想查看它。

Answer 1

我不知道Isotope，我还没有测试它是否有效。但我已经使用注释重构您的代码，以帮助您更好地理解问题。

我认为它来自你如何连续调用removeClass和addClass，两者立即取消。

var page = 1;
var loading = true;
var $window = $(window);
var $content = $('.isotope');
var loopHandler = '/inc/loop-handler.php';

var isotopeController = {
    append: function($data) {

        // Add AJAX data
        var itemHeight = $('.item').height();
        var height = $content.height() + itemHeight * 2;
        $content.append($data);
        $content.css('min-height', height);

        // Stop
        isotopeController.stop($data);

        // Restart
        $content.imagesLoaded(function() {
            // When images loaded !
            isotopeController.start($data);
        });
    },
    start: function($data) {

        // Start isotope
        $content.isotope({
            layoutMode: 'fitRows',
            itemSelector: '.item'
        });

        // Show data
        $data.fadeIn(700, function() {
            $("#temp_load").fadeOut(700).remove();
            loading = false;
        });

        // Start the animation
        $content.removeClass('no-transition');
        $content.css('min-height', '0');
    },
    stop: function($data) {

        // Hide data
        $data.hide();

        // Stop the animation
        $content.addClass('no-transition');

        // Stop isotope
        $content.isotope('destroy');
    },
    loadPosts: function() {
        $.ajax({
            type: "GET",
            data: {
                numPosts: 1,
                pageNumber: page
            },
            dataType: "html",
            url: templateDir + loopHandler,
            beforeSend: function() {
                if (page != 1) {
                    $('.loader').append('' +
                        '<div id="temp_load" style="text-align:center; z-index:9999;">' +
                        '<img src="' + templateDir + '/img/ajax-loader.gif" />' +
                        '</div>'
                    );
                }
            },
            success: function(data) {
                var $data = $(data);
                if ($data.length) {
                    isotopeController.append($data);
                } else {
                    $("#temp_load").remove();
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
    }
};

$window.scroll(function() {
    var content_offset = $content.offset();
    if (!loading && ($window.scrollTop() + $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
        loading = true;
        page++;
        isotopeController.loadPosts();
    }
});

// On load
$(function() {
    if (!$('body').hasClass('home')) {
        loopHandler = '/inc/loop-handler-archive.php';
    }
    isotopeController.loadPosts();
});

jQuery add / removeClass＆amp; AJAX无法正常工作

1 个答案: