0

画像をフェードさせるこのコードがあります

$("#mix").click(function() {
   $("#mix").addClass("load");
      $("#brick-image").stop(true).fadeTo("slow", 0);
      $("#brick-image").load(function() {                                
         $("#mix").removeClass("load");
         $("#brick-image").stop(true).fadeTo("slow", 1);
      });
      $("#brick-image").attr("src","build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&"+new Date().getTime());
});

HTML

<div id="bricks">
   <img src="build.php" id="brick-image">
</div>

<div id="mix-button">
   <a href="#" id="mix" class="load">Bland igen</a>
</div>

これに伴う問題は、画像がフェードアウトしてから新しい画像がフェードインすることです。新しい画像を重ねてフェードインし、古い画像を非表示にして、最初に背景にフェードします（点滅）？

imgタグのbuild.phpは、動的なランダム画像を作成する関数です。

4

3 に答える 3

1

そこには画像タグが1つしかないため、スムーズに移行することはできません。2つの異なる画像を作成する必要があります。一方はフェードアウトし、もう一方は同じ速度でフェードインします。このようなもの：

HTML：

    <div id="bricks">
       <img src="build.php" class="brick-image active">
       <img src="build.php" class="brick-image">
    </div>

    <div id="mix-button">
       <a href="#" id="mix" class="load">Bland igen</a>
    </div>

CSS：

#bricks {
    position: relative;
}

.brick-image {
    position: absolute;
    display: none;
}

.brick-image.active {
    display: block;
}

JS：

$('#mix').click(function() {
   var $mix = $(this),
       $imgs = $('.brick-image', '#bricks');
       $newImg = $imgs.not('.active');

   $mix.addClass('load');
   $newImg.attr('src', 'build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&'+new Date().getTime());
   $imgs.stop(true).toggleClass('active').fadeToggle('slow', function() {
       $mix.removeClass('load')
   });
});
于 2012-09-19T11:24:11.710 に答える
0

whileとを使用position:absoluteして変更することにより、cssクラスを使用してそれを行うことができます。z-indexfadeInfadeOut

于 2012-09-19T11:10:56.210 に答える
0

jsBinデモ

$("#mix").click(function(e){
      e.preventDefault();
      $("#mix").addClass("load");
      $('<img />').attr('src',"build.php?bricks=RT433,RT201,RT543&ratio=40,40,20&"+new Date().getTime()).load(function(){
         $("#mix").removeClass("load");
        $(this).hide().fadeTo(800,1).css({position:'absolute',top:0,left:0});
      }).appendTo('#bricks');
});
于 2012-09-19T11:31:06.420 に答える