如何在jQuery中将背景颜色设置为透明的?

前端之家收集整理的这篇文章主要介绍了如何在jQuery中将背景颜色设置为透明的?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我可以动画从透明到颜色,但是当我告诉jquery动画的backgroundColor:’transparent’它只是改变为白色。任何想法如何解决这个?

解决方法

透明不是真的是一种颜色。所以,你不能动画。你可以通过使用一个单独的元素为背景,并动画的不透明度,虽然实现你要找的效果。 @H_403_6@例:

@H_403_6@HTML:

<body style="background-color:yellow">
  <!-- by default,"see through" to parent's background color -->
  <div id="container"> 
    Lorem ipsum dolor sit amet,consectetur adipiscing elit. 
    Aenean nec magna. Nulla eu mi sit amet nibh pellentesque vehicula. 
    Vivamus congue purus non purus. Nam cursus mollis lorem.    
  </div>
</body>
@H_403_6@脚本:

// on load...
$(function()
{
  var container = $("#container");
  container
    .hover(
      // fade background div out when cursor enters,function() 
      { 
        $(".background",this).stop().animate({opacity:0}); 
      },// fade back in when cursor leaves
      function() 
      { 
        $(".background",this).stop().animate({opacity:1}) 
      })
    // allow positioning child div relative to parent
    .css('position','relative')
    // create and append background div 
    // (initially visible,obscuring parent's background)
    .append( $("<div>")
      .attr('class','background')
      .css({
        backgroundColor:'blue',position: 'absolute',top:0,left:0,zIndex:-1,width:container.width(),height:container.height()
      }) 
    );
});
@H_403_6@Kingjeffrey的评论指出,这个答案有点过时 – 浏览器现在支持RGBA颜色值,所以你可以只为背景动画。但是,jQuery不支持在核心 – 你将需要一个plugin.参见:jQuery + RGBA color animations

猜你在找的jQuery相关文章