0

リンクをクリックしたときに画像をフェードインしようとしていますが、フェードするたびに「点滅」します。このまばたきを避けて、きれいなフェードインを行う方法はありますか?

これは私の現在のコードです：

function changeMortar(mortar) {
     var html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'                    
        $("#fuge-color").hide().html(html).fadeIn('slow');
    }​

この例を http://jsfiddle.net/BHCam/14/にしました

それは白くなり、選択したモルタルに入ります。私が望むのは、選択したモルタルを古いモルタルの上にフェードさせることです。

4

4 に答える 4

4

このような点滅やその他のアーティファクトは、ブラウザーまたはグラフィック カード ドライバーが原因である可能性が高いため、グラフィック設定の調整やマシン コンポーネントのアップグレードを確認する以外にできることはあまりありません。あなたの例はここでスムーズにフェードします。

于 2012-09-12T09:29:33.333 に答える
1

コードにいくつかの変更を加えました。HTML で次のようにしてみてください。

<div id="slideshow">
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeGraa.png" alt="" class="active" width="500" height="300"/>
   <img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fugeAnthrazit.png" width="500" height="300" />

</div>
<a href="#" class="change-mortar-link" onclick="slideSwitch();">Change mortar</a>

CSS で:

#slideshow {
   position:relative;
   height:350px;
}
#slideshow IMG {
  position:absolute;
  top:0;
  left:0;
  z-index:8;
}
#slideshow IMG.active {
   z-index:10;
}
#slideshow IMG.last-active {
   z-index:9;
}

そして JavaScript コード:

function slideSwitch() {
   var $active = $('#slideshow IMG.active');

   if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

   var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

   $active.addClass('last-active');

   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
          $active.removeClass('active last-active');
     });
  }

ここでは、より多くの情報を見つけることができます。JsFiddleでの実行例を次に示します。

于 2012-09-12T10:33:45.290 に答える
1

に変更するだけです

 $("#fuge-color").hide().fadeIn('slow'); //use slow,fast,1000,2000,3000

最良の結果を選択してください

于 2012-09-12T09:41:31.683 に答える
1

試してみてくださいanimate：

function changeMortar(mortar) {
 var $html = '<img src="http://www.randerstegl.dk/fileadmin/fugefarver/GFXSharedMortars/fuge'+mortar+'.png" width="500" height="300">'                    
     $("#fuge-color").animate({ opacity: 0.8 }, 'fast', function(){
          $(this).html($html).animate({ opacity: 1 }, 'fast');
     });
}
于 2012-09-12T09:47:21.080 に答える