0

私は何かを作ろうとしていますが、昨日jQueryについて読み始めたので、まだうまくいきません:)

しかし、私が作ろうとしているのは、マウスエンター/リーブまたはホバーでロゴの画像を交換することです。

だからここに私が作ったものがあり、それは明らかに悪いですが...

    $(document).ready(function() {
    var logo = $('#logo');

    logo.on('mouseenter', function() {
        logo.css('background-image', 'url("img/logo2.png")');
    });
    logo.on('mouseleave', function() {
        logo.css('background-image', 'url("img/logo.png")');
    });
});

これは問題なく動作します。おそらく優れたコードでもありません...しかし、fadeInやfadeOutのようなアニメーションはありません...作成方法がわかりません。

これを作るのを手伝ってください、そして事前に感謝します！

4

3 に答える 3

1

画像をフェードインするには、最初に両方の画像をロードし、絶対位置と適切なz-indexを重ねてロードする必要があります。

次に、画像にカーソルを合わせると、画像を「上」にフェードアウトさせて、下の画像を表示する必要があります。したがって、要素の背景画像を実際に調整する必要はありません。

<div id="logo-container" style="position:relative;">
    <div id="logo-above" style="position:absolute;z-index:2">
        <img src="img/logo1.png" />
    </div>
    <div style="position:absolute;z-index:1">
        <img src="img/logo2.png" />
    </div>
</div>

<script>
    $(document).ready(function() {
        var $logoContainer = $('#logo-container');
        var $logoAbove = $('#logo-above');

        $logoContainer.on('mouseenter', function() {
            $logoAbove.fadeOut();
        });
        $logoContainer.on('mouseleave', function() {
            $logoAbove.fadeIn();
        });
    });
</script>

ps'jqueryfied'である変数の前に$を付けるのは良い習慣です。そうすれば、それらに対してjqueryを再度呼び出さないことがわかります。例：$logoContainer。

于 2012-09-04T22:26:19.453 に答える
1

CSS3トランジションを使用してクロスフェードできます。-vendor-transitionプロパティをCSSとして追加するだけです。

#logo
{ 
    background: url('img/logo.png');
    -webkit-transition: all 1s ease;
}

デモ

于 2012-09-04T22:29:37.860 に答える
1

このデモをご覧ください。

この手法では、1つの画像のCSSを編集する代わりに、2つの画像のレイヤーを変更します。

これがJSです：

var $img1 = $('#image1'),
    $img2 = $('#image2');

$('#logo').on('mouseenter', function() {
    $img1.stop(true, true).prependTo(this).show();
    $img2.fadeOut();
}).on('mouseleave', function() {
    $img2.stop(true, true).prependTo(this).show();
    $img1.fadeOut();
});​
于 2012-09-04T22:29:39.723 に答える