jquery - jQuery 需要 2 次点击才能获得最终结果？

Question

我正在使用同位素 jQuery 插件，这似乎是一个糟糕的笑话。

articlePost当您单击同位素容器中的 div 容器（在 3 个顶部帖子下）时，应该会发生什么。动画和 CSS 发生变化，然后您必须再次单击以获取正确的left: 0px;值以占用正确的空间。

第一次单击仅对 CSS 大小更改进行动画处理。第二次单击将其移动到正确的位置。

现场示例：theciv.com/vancouver

jQuery(document).ready(function($){ 
        var $container = $('#articlePost');
    $(window).load(function(){
        $.ajaxSetup({ cache: false });
              $('#articlePost').imagesLoaded( function() {
                $('#articlePost').isotope({
                    itemSelector: '.boxy',
                  masonry: { columnWidth: $container.width() / 3 }
                });
        $(".read a").click(function (event) {
            event.preventDefault();
            var post_id = $(this).attr("rel");
            $.ajaxSetup({cache:false});
            $(this).closest(".boxy")
            .animate({
            left: "0%",
            width: "100%",
            height: "300px",
            }, 500);
            $(this, "#foldOut").animate({
            height: "300px",
            }, 1000)
            .load("<?php echo get_site_url(); ?>/ajax-fold/",{id: post_id});
            $container.isotope('reLayout', 'reloadItems');
        });
              });
    });
});