防止图像重新排列

Question

我有一个包含4个图像的网格，如下所示：

有一个取消按钮（.overlay-not-interested）悬停在每个图像上，单击该按钮将用新的ajax取出图像替换该图像。 jquery就是这样：

$('.overlay-not-interested').on("click", function(){
    var movie=$(this).closest('.movie');
    movie.fadeOut(500, function(){
        $.get('reco_product_stream.jsp?type=replace', function(data) {
            var $a = $(data).find('a'); 
            movie.children('a').replaceWith($a);
            movie.fadeIn(500);
        });             
    }); 
});

问题在于，当图像淡出时，网格会在新图像出现之前突然重新排列一毫秒（即3秒转到第2个位置，第4个转到第3个位置）。虽然它很好，但是我希望防止那种不稳定的重排发生。

网格的HTML是：

<div id="reco" class="span4">
    <div class="viewport">
        <ul class="overview">
            <li class="movie-group">
                <span class="movie"><a title="Sin city" class="movie-link"><img src="images/1.jpg" /></a></span>
                <span class="movie"><a title="Annie Hall" class="movie-link"><img src="images/2.jpg" /></a></span>
                <span class="movie"><a title="Madagascar 3" class="movie-link"><img src="images/3.jpg" /></a></span>
                <span class="movie"><a title="As Good As It Gets" class="movie-link"><img src="images/4.jpg" /></a></span>
            </li>
        </ul>
    </div>
</div>

Answer 1

而不是fade使用opacity动画。

$('.overlay-not-interested').on("click", function(){
    var movie=$(this).closest('.movie');
    movie.animate({
           opacity: 0
        }, 500, function(){
        $.get('reco_product_stream.jsp?type=replace', function(data) {
            var $a = $(data).find('a'); 
            movie.children('a').replaceWith($a);
            movie.animate({
                opacity: 1
            }, 500);
        });             
    }); 
});

此方法将等待图像加载然后显示。 AJAX兼容。 ;)

Answer 2

将包含元素尺寸设置为影片封面的大小，并仅替换其内容。这样，当你更换它的孩子时，就不会有回流。