1
イメージをプリロードしようとしています。イメージをバックグラウンドイメージとして設定する必要がある場合は、準備が整い、CSSの遷移中に読み込まれません。私はAJAX load()メソッドを使ってそれをしようとしましたが、私はAJAXなしでそれを行うことができるはずだと思います。私はimgタグやsrcは必要ないので、このようなことはうまくいきませんが、後でバックグラウンドイメージとして設定できるように、バックグラウンドイメージの直接URLを保存するようなものです。イメージを後でjQueryで背景イメージとして設定するにはどうしたらいいですか?
var img = new Image(); img.src = 'img.jpg';
これは私がこれまで何をやったかである:
$(document).ready(function() {
$('#LogoContainer').hover(function() {
$('#LogoMainPart').fadeTo('slow', 0.3);
$('#LogoOtherPart').fadeTo('slow', 1);
$('#Introduction').css('background-image', 'url(hoverbackground.jpg)');
}, function() {
$('#LogoMainPart').fadeTo('slow', 1);
$('#LogoOtherPart').fadeTo('slow', 0.3);
$('#Introduction').css('background-image', 'url(background.jpg)');
});
});
ありがとう、とてもシンプルで機能します!私は、ホバリング背景画像アニメーションのためのCSSリニアトランジションを使用しています、私はホバリング時に動作しますが、マウスでは動作しません。 CSSでリバーストランジションを適用するオプションがありますか、またはjQueryフェーディングのために直接移動する必要はありますか?私は背景イメージでそれを行うことができるかどうかはわかりません。 –
@AdrianaCota CSSの背景不透明度をアニメーション化することはCSS標準(https://www.w3.org/TR/css3-transitions/#animatable-css)ではないため広くサポートされていませんが、この周り。ここにペン(http://codepen.io/haltersweb/pen/QNPVLq)があります。ここで、バックグラウンドとして動作するように子divでコンテンツdivを作成しました。コンテンツdivにマウスポインタを置くと、bknd divは不透明度が1秒以上になります。マウスオーバーすると、トランジションが逆になります。ホバー状態は親にあり、不透明度の遷移は子にあります。 – haltersweb