[解決済み] jQueryで背景画像をアニメーションで変化させる

質問

ようやく動作するようになったのですが、JQueryのアニメーション機能を使って、ホームページのリスト項目にカーソルを合わせたときに、背景画像の変化がきれいにフェードインする方法を教えてください。

http://www.thebalancedbody.ca/

これまでのところ、これを実現するためのコードは:-です。

$("ul#frontpage li#277 a").hover(
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/nutrition_background.jpg)');
    },
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
    }
);

$("ul#frontpage li#297 a").hover(
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/vibration_training.jpg)');
    },
    function() {
        $('#homepage_container').css('background-image', 'url(http://www.thebalancedbody.ca/wp-content/themes/balancedbody_V1/images/default_background.jpg)');
    }
);

などなど

これにANIMATE機能を追加するにはどうしたらいいでしょうか？

ありがとうございます。

ジョナサン

解決方法は？

これは、jQueryの animate なぜなら、背景画像はそのようなフェードを行うために必要なCSSプロパティを持っていないからです。 jQueryはブラウザが可能にするものしか利用できません。(jQueryのエキスパート、もちろん私が間違っていたら訂正してください)。

これを回避するためには、純正の background-image が div を使用して配置された、画像を含む要素です。 position: absolute (または fixed ) と z-index をスタックに使用します。そして、これらの div s.