用jQuery动画背景图像更改 [英] Animate background image change with jQuery

问题描述

我现在终于可以正常工作了，但是想知道当您将鼠标悬停在主页上的列表项上时，如何使用JQuery的动画功能使背景图像的变化很好地淡入:-

I finally have this working now but would like to know how I can use JQuery's animate function to make the background image changes fade in nicely when you hover over the list items on the homepage:-

http://www.thebalancedbody.ca/

到目前为止，实现此目的的代码是:-

The Code to make this happen so far is:-

$("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函数-谢谢！

How would I add the ANIMATE function to this please - thanks!!!

谢谢

乔纳森

推荐答案

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

I don't think this can be done using jQuery's animate function because the background image does not have the necessary CSS properties to do such fading. jQuery can only utilize what the browser makes possible. (jQuery experts, correct me if I'm wrong of course.)

我想您可能不必使用真正的background-image来解决此问题，而是使用包含position: absolute(或fixed)和z-index的堆栈定位的包含图像的div元素.然后，您可以为这些div设置动画.

I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.

这篇关于用jQuery动画背景图像更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！