0

次のような 4 つの画像のグリッドがあります。

ここに画像の説明を入力

.overlay-not-interested各画像にカーソルを合わせるとキャンセル ボタン ( そのための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>
4

2 に答える 2

2

代わりにアニメーションを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 対応。;)

于 2013-01-10T10:46:34.967 に答える
0

包含要素の寸法を映画の表紙のサイズに設定し、その内容のみを置き換えます。そうすれば、その子を置き換えるときに、リフローは発生しません。

于 2013-01-10T10:46:25.737 に答える