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');
        });
              });
    });
});