javascript - 布局/masonry - 延迟布局调整 - 一键落后

Question

好的，问题来了 https://jsfiddle.net/yq7f1a63/1/

这是我的代码:

$(function () {
 $('.content').hide();
 $('a.read').click(function () {

     $(this).parent('.excerpt').hide();
     $(this).closest('li').find('.content').slideDown('fast');
     $('ul').masonry('layout');
     return false;
 });
 $('a.read-less').click(function () {

     $(this).parent('.content').slideUp('fast');
     $(this).closest('li').find('.excerpt').show();
     $('ul').masonry('layout');
     return false;       
 });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

我有几个里面有文字的砖石制品。单击“阅读更多”时，它会显示更多文本(将 .excerpt 替换为 .content)。

我正在使用布局方法在单击每个项目以显示更多内容时调整网格，但由于某种原因它落后了一次。因此，例如，我在第一个项目上单击“阅读更多”，但它出错了，但随后我单击“阅读更多”以了解下一个项目，它会调整为第一个项目的布局，依此类推!

大家有什么想法吗？!提前致谢:-)

Answer 1

slideDown() 或 slideUp() 完成后需要调整网格。因此，将该代码添加到它们的完整回调函数中。

$(function () {
     $('.content').hide();
     $('a.read').click(function () {

         $(this).parent('.excerpt').hide();
         $(this).closest('li').find('.content').slideDown('fast',function(){
            $('ul').masonry('layout');
         });         
         return false;
     });
     $('a.read-less').click(function () {

         $(this).parent('.content').slideUp('fast',function(){
            $(this).closest('li').find('.excerpt').show();
            $('ul').masonry('layout');
         });         
         return false;       
     });
 });

 $('ul').masonry({
  itemSelector: 'li',
});

JSFiddle:https://jsfiddle.net/yq7f1a63/2/