jquery - 使用 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)');
    }
);

等等等等

我该如何添加动画功能 - 谢谢!!!

谢谢

乔纳森

Answer 1

我认为这不能使用 jQuery 的 animate 函数来完成，因为背景图像没有必要的 CSS 属性来进行这种淡入淡出。 jQuery 只能利用浏览器所能实现的功能。 (jQuery 专家，如果我错了，请纠正我。)

我想你必须通过不使用真正的 background-image 来解决这个问题，而是使用包含图像的 div 元素，并使用 position:absolute 定位(或固定)和z-index用于堆叠。然后，您可以为这些div设置动画。