1

jQuery に次のコードがあります。

if (klick = true) $(this).fadeOut('fast', function(){
    $(this).attr("src", "../img/daniel_effects.png").fadeIn();
});

画像の変更は次のように機能するようになりました: - Image1 のフェードアウト - 画像が表示されない - Image2 のフェードイン

画像の間に画像がなく、少し時間もかからずに、画像が一緒に消えていくというこれを修正するにはどうすればよいですか?

私が言いたいことを理解できるサイトは次のとおりです。

http://anthraxbeats.com/pages/biography.html

画像にカーソルを合わせると、画像が読み込まれる前に短い空白ができます。どうすれば修正できますか?

4

3 に答える 3

1

アニメーションに [queue: false] を追加すると、同時に複数のアニメーションが可能になります

var $theOtherThing = $(this).attr("src", "../img/daniel_effects.png");

if(klick === true){
    $(this).animate({
        "opacity": "0"
     }, {
        duration: 200,
        queue: false
     });
    $theOtherThing.animate({
        "opacity": "1"
     }, {
        duration: 200,
        queue: false
    });
于 2013-07-03T19:41:37.973 に答える
1

2 つの異なるイメージを使用します。css プロパティを「position: absolute」に設定して、同じスペースをカバーするようにします。最初のものをフェードアウトさせ、もう一方を false に設定します。position: relative を使用する適切なコンテナが必要な場合があります。 position: absolute により、予期しない動作が発生する可能性があります。

#container{
position: relative;
width: 100px;
height: 100px;
}
.img1, .img2{
position: absolute;
width: 100%;
}
于 2013-07-03T19:34:42.947 に答える