使用jQuery动画背景图像更改

Question

我现在终于可以使用此功能了，但是想知道当您将鼠标悬停在首页上的列表项上时，如何使用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函数添加到此-谢谢！！！

谢谢

Answer 1

我不认为可以使用jQuery的animate功能来完成此操作，因为背景图像没有必要的CSS属性来进行这种褪色。jQuery只能利用浏览器实现的功能。（jQuery专家，如果我错了，请纠正我。）我猜想您将不得不通过不使用true来解决此问题background-image，而是div使用position: absolute（或fixed）定位并z-index包含堆栈的包含图像的元素。然后，您可以为这些动画div。