jQuery笔记——动画设计——渐变效果

来源：互联网发布：中世纪2 优化9 拜占庭编辑：程序博客网时间：2024/06/06 14:04

调整元素不透明度

浏览器兼容问题：

IE：支持filter滤镜集，opacity属性值范围：0（完全透明）—100（不透明）

非IE：支持style.opacity 属性，范围：0（完全透明）—1（不透明）

jQuery 为元素渐隐和渐显定义了3个方法：fadeIn()、fadeOut()、fadeTo()

一、淡入和淡出

fadeIn和fadeOut

fadeIn([duration] ,[callback])

fadeIn([duration] , [easing] , [callback])

fadeOut([duration] ,[callback])

fadeOut([duration] , [easing] , [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

fadeIn和fadeOut：

通过改变透明度的值来实现；透明度为0时，display将会被设为none，以确保该元素不会影响页面布局。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；如果提供任何其他字符串，或者这个duration参数被忽略，默认使用400ms。

这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，每执行一次回调匹配的元素，而不是作为一个整体动画的一次。

应用：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>淡入和淡出</title>    <script src="js/jquery2.1.3.min.js"></script>    <script type="text/javascript">        $(function(){            $("span").click(function(){                $(this).fadeOut(1000,function(){                    $("div").text("“" + $(this).text() + "”已经隐藏。");                    $(this).remove();                });            });            $("span").hover(function(){                $(this).addClass("hilite");            },function(){                $(this).removeClass("hilite");            });        });    </script>    <style type="text/css">        span{cursor: pointer;}        span.hilite{background: yellow;}        div{display: inline;color: red;}    </style></head><body><h3>隐藏提示：<div></div></h3><p>雨，<span>轻薄浅落</span>，<span>丝丝缕缕</span>，<span>幽幽怨怨</span>。不知何时起，细腻的心莫名的爱上了阴雨天。也许，雨天是思念的<span>风铃</span>，雨飘下，铃更响。伸出薄凉的手掌，雨轻弹的滴落在掌心，<span>凉意</span>，遍布全身；<span>怀念</span>，张开翅膀；<span>眼角</span>已感润湿</p></body></html>

注意：fadeIn（）作用于隐藏元素

fadeOut（）作用于显示元素

二、设置淡出透明效果

把所有匹配元素的不透明度以渐进的方式调整到指定的不透明度：fadeTo()

fadeTo(duration , opacity , [callback])

fadeTo(duration , opacity , [easing] [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

opacity：一个0—1之间的数字，表示目标透明度

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

和其他效果方法不同，fadeTo（）需要明确的指定duration参数

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；如果提供任何其他字符串，或者这个duration参数被忽略，默认使用400ms。

应用：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>设置淡出透明效果</title>    <script src="js/jquery2.1.3.min.js"></script>    <script type="text/javascript">        $(function(){           $("input").click(function(){               $("div").fadeTo(2000,0.4)           });        });    </script></head><body><input type="button" value="渐隐渐显效果"/><div><img src="images/1.jpg"></div></body></html>

注意：fadeTo（）只能作用于显示的元素，对隐藏元素无效。

三、渐变切换

fadeToggle;

fadeToggle([duration] , [callback])

fadeToggle([duration] , [easing] , [callback])

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；

应用：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>渐变切换</title>    <script src="js/jquery2.1.3.min.js"></script>    <script type="text/javascript">        $(function(){            $("button:first").click(function(){                $("img:first").fadeToggle("slow","linear");            });            $("button:last").click(function(){                $("img:last").fadeToggle("fast",function(){                    $("#log").append("<div>单击按钮2</div>");                });            });        });    </script></head><body><button>控制按钮1</button><button>控制按钮2</button><p><img src="images/2.jpg" width="200"/><img src="images/3.jpg" width="200"/></p><div id="log"></div></body></html>

0 0