1

フェードイン/フェードアウト jquery プラグインを利用しようとしています。昨日ここにいる他の人の助けを借りて、ほぼ完璧に機能するようになりました。しかし、最初にdivにカーソルを合わせたとき、フェードイン効果が機能しないようです。2回目以降のホバー後に機能します。そして、フェードアウトはまったく機能していないようです。

http://jsfiddle.net/c6gRp/4/

注: ステップ 1 にカーソルを合わせても、何も起こらないはずです。ただし、他のステップにカーソルを合わせると、カラー ブロックがフェード イン/フェード アウトするはずです。私はデザイナーの方が多いので、最初のホバーでアニメーションが発生しない理由がわかりません。これは JS コードを実行する適切な方法ですか?

$(document).ready(function () {

    $("div.secure").hover(
        function() {
            $("div.secure-hover").stop(true, true, true).fadeIn('slow');
        },
        function() {
            $("div.secure-hover").stop(true, true, true).fadeOut('slow');
        }
    );

    $("div.cash").hover(
        function() {
            $("div.steps-hover.cash-hover").stop(true, true, true).fadeIn('slow');
        },
        function() {
            $("div.steps-hover.cash-hover").stop(true, true, true).fadeOut('slow');
        }
    );

    $("div.credit").hover(
        function() {
            $("div.credit-hover").stop(true, true, true).fadeIn('slow');
        },
        function() {
            $("div.credit-hover").stop(true, true, true).fadeOut('slow');
        }
    );

});

助けてくれてありがとう。

4

2 に答える 2

2

あなたのCSSには、この「div.cash:hover div.cash-hover」のようなすべての-hoverがあります 

div.default, div.cash:hover div.cash-hover, div.secure:hover div.secure-hover, div.credit:hover div.credit-hover{
    margin: 0;
    padding: 0;
    width: 960px;
    text-align: center;
    height: 180px;
    position: absolute; 
    top: 234px;
    display: block;
    left: 0;
    z-index: 3;
    right: 0px;
    cursor: auto;
}

この「div.cash-hover」のように変更すると、要素div.cashにカーソルを合わせたときにのみ、プロパティの幅、高さなどを設定します 

div.default, div.cash-hover,div.secure-hover, div.credit-hover{
    margin: 0;
    padding: 0;
    width: 960px;
    text-align: center;
    height: 180px;
    position: absolute; 
    top: 234px;
    display: block;
    left: 0;
    z-index: 3;
    right: 0px;
    cursor: auto;
}
//set all -hover to display none
div.cash-hover, div.secure-hover, div.credit-hover {
    display: none;
}

$("div.cash").hover で不透明度http://jsfiddle.net/c6gRp/6/をアニメーション化できるように、最初から div.cash-hover のプロパティを設定します。

于 2013-07-12T17:51:55.730 に答える
0

div.online-hover に何も指定していません。

$("div.online").hover(
function () {
    $("div.online-hover").stop(true, true, true).fadeIn('slow');
},
function () {
    $("div.online-hover").stop(true, true, true).fadeOut('slow');
});

http://jsfiddle.net/c6gRp/5/

于 2013-07-12T16:40:33.457 に答える