jquery - 防止图像重新排列

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

问题是当图像淡出时，网格会在新图像出现之前突然重新排列一毫秒（即 3rs 到第 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

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