Jquery 实现动画效果 （二）

基本动画：http://www.cnblogs.com/307914070/archive/2011/01/07/1929643.html

 

接下来做一个 淡入淡出 的效果：

要使用到的Jquery函数有：fadeTo ，fadeIn，fadeOut 这三个函数,其中还需对图片实现半透明效果。

所使用到的是CSS的相关知识：alpha。

 

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery 动画之 - 淡入淡出效果</title>
    <script src="Script/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

    <!-- 设定初始透明度 -->
    <style type="text/css">
          img{ filter:alpha(opacity=30);opacity:0.3;}
    </style>
</head>
<body>
      <div style="width:1024px; margin:0 auto;">
         <div  >
         <div id="div2" style=" width:1024px;" > 
            <div ><img id="img1" src="Image/01.jpg" alt="01" />
            <img id="img2" src="Image/02.jpg" alt="02"  style="filter:alpha(apacity=100);opacity:1" />
            <img id="img3" src="Image/03.jpg" alt="03"  />  </div>

         </div>
      </div>
      <script type="text/javascript" language="javascript">
          //鼠标进入
          $("img").mouseover(function (event) {
              $(this).fadeTo("200", 1);
          });

          //鼠标移走
          $("img").mouseout(function (event) {
              $(this).fadeTo("200", 0.22);
          });
      </script>
</body>
</html>

 

页面加载效果：

 

鼠标移动效果1：

 

鼠标移动效果2：

 

 

posted @ 2011-01-07 17:33  序猿·徐  阅读(396)  评论(0)    收藏  举报