jQuery添加/刪除類和AJAX不工作

Question

我使用與AJAX的同位素拉在WordPress的一些職位，幾乎一切都在那裏，除了默認的同位素動畫運行時，我在內容中的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

我不知道同位素，我還沒有測試，如果它的作品。但是我使用註釋重構了代碼，以幫助您更好地理解問題。

我認爲它來自你如何連續調用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(); 
});