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

最新推荐文章于 2023-10-11 13:12:33 发布

行走的鹿

最新推荐文章于 2023-10-11 13:12:33 发布

阅读量712

点赞数

文章标签： jquery 动画设计

本文链接：https://blog.youkuaiyun.com/Deer_F/article/details/53097794

版权

本文详细介绍了jQuery中实现元素渐变效果的方法，包括fadeIn()、fadeOut()、fadeTo()以及fadeToggle()。针对不同浏览器的兼容性问题，文章探讨了如何调整元素的不透明度，并解析了各个方法的参数含义和使用场景，为读者提供了实用的jQuery动画设计指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调整元素不透明度

浏览器兼容问题：

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>