使用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的专家,纠正我,如果我错了当然。)

我想你将不得不解决这个不使用真正的背景图像,但div元素包含图像,定位使用position:absolute(或fixed)和z-index进行堆叠。然后你会激活这些div。

http://stackoverflow.com/questions/2983957/animate-background-image-change-with-jquery

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:使用jQuery创建动画背景图像更改