使用jQuery创建动画背景图像更改

前端之家收集整理的这篇文章主要介绍了使用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)');
     },'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。

原文链接:https://www.f2er.com/jquery/184130.html

猜你在找的jQuery相关文章