0

ホバー状態でのフェードインとフェードアウトに使用する次のコードがあります。

$(function(){
    $("#bottomIco ul li a").hover(function(){
        $(this).children("#gray").fadeOut("100",function(){
            $(this).parent().children("#actual").fadeIn("100");
        });
    },function(){
        $(this).children("#actual").fadeOut("100",function(){
            $(this).parent().children("#gray").fadeIn("100");
        });
    });
});

動作しますが、#gray にカーソルを合わせると空白になり、#actual div が表示されます。

スムーズにする必要があります。つまり、ホバー中に空白になる必要はありません。

4

2 に答える 2

1

「空白」になるのは、のフェードアウト#actualのコールバックでフェードインしているためです。つまり、完全にフェードアウトしてからフェードインする#grayのを待っているということです。#gray#actual

フェードアウトとフェードインを同時に行うようにしてください。

$(this).children("#gray").fadeOut(100);
$(this).children("#actual").fadeIn(100);

両方のフェードは非同期で実行されるため、ほぼ同時に、1 ミリ秒または 2 ミリ秒遅れて実行されます。

これを行うときに考慮する必要があるのは、両方が同時に画面にレンダリングされることだけです。そのため、フェード トランジションが必要な場合は、配置を検討する必要があります。

#bottomIco ul li a { position: relative; }

    #bottomIco ul li a.fade #gray,
    #bottomIco ul li a.fade #actual {
        position: absolute;
        top: 0;
        left: 0;
    }

fade次に、フェードアウトするときにクラスを適用して削除します。

var $this = $(this);
$this.addClass("fade");
$this.children("#gray").fadeOut(100);
$this.children("#actual").fadeIn(100, function() {
    $this.removeClass("fade");
});
于 2012-05-11T04:48:04.533 に答える
0

CSS3 を使用すると、より洗練されたソリューションになると思います。jsfiddle を投稿して、まとめてもらえますか?

于 2012-05-11T06:16:52.280 に答える