jquery背景图淡入淡出效果示例代码__hover_opacity_background_no-repeat_logo_

当前位置: 编程技术>jquery

jquery背景图淡入淡出效果示例代码

来源: 互联网发布时间：2014-10-09

本文导语: 先来看下背景图淡入淡出的原理：通过一个两张不同的图片，两个不同的层重叠在一起，顶层暂时透明，当鼠标移上去时，顶层由透明变成不透明，鼠标离开反之。下面来看jquery实现背景图片淡入淡出效果的具体例子，一起...

先来看下背景图淡入淡出的原理：
通过一个两张不同的图片，两个不同的层重叠在一起，顶层暂时透明，当鼠标移上去时，顶层由透明变成不透明，鼠标离开反之。

下面来看jquery实现背景图片淡入淡出效果的具体例子，一起学习下。

1，html部分：

代码示例:

语句百分网

2，css代码：

代码示例:

#logo{

  margin:0 auto;

  position:relative;/*相对定位,为了下面hover的绝对定位*/

  background:url(/tech-jquery/fatkun.png) left top no-repeat;/*设置背景图*/

  width:150px;

  height:40px;/*注意这里高度*/

  display:block;

  text-indent:-9999px;

 }

 #logo .hover{/*为jq准备*/

  background:url(/tech-jquery/fatkun.png) left bottom no-repeat;/*background-position和上面不同*/

  position:absolute;/*为了使两张图片重叠在一起*/

  top:0;

  left:0;

  height:40px;

  width:150px;

 }

3，jquery代码

代码示例:

  $("#logo").append("");//添加一个标签用来和灰图重叠起来

  $(".hover").css('opacity', 0);//先不显示

     $(".hover").parent().hover(

  function(){

   $(".hover").stop().animate({opacity: '1'},1000);

  },

  function(){

   $(".hover").stop().animate({opacity: '0'},1000);

  });

4，完整实例

代码示例:

jquery 背景图渐显--www.yuju100.com

body{
padding-top:100px;
text-align:center;
}
#logo{
margin:0 auto;
position:relative;/*相对定位,为了下面hover的绝对定位*/
background:url(/tech-jquery/fatkun.png) left top no-repeat;/*设置背景图*/
width:150px;
height:40px;/*注意这里高度*/
display:block;
text-indent:-9999px;
}
#logo .hover{/*为jq准备*/
background:url(/tech-jquery/fatkun.png) left bottom no-repeat;/*background-position和上面不同*/
position:absolute;/*为了使两张图片重叠在一起*/
top:0;
left:0;
height:40px;
width:150px;
}

yuju100.com
    yuju100.com


$("#logo").append("");//添加一个标签用来和灰图重叠起来
$(".hover").css('opacity', 0);//先不显示
     $(".hover").parent().hover(
function(){
   $(".hover").stop().animate({opacity: '1'},1000);
},
function(){
   $(".hover").stop().animate({opacity: '0'},1000);
});