jQuery效果-淡入淡出-滑动-回调

Posted 它的眼角开过光

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery效果-淡入淡出-滑动-回调相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../JQuery/jquery-1.8.0.min.js"></script>
    <script src="JavaScript1.js"></script>
    <style>
        #content, #flipshow, #fliphide, #fliptoggle 
            padding: 5px; /*边距*/
            text-align: center; /*文字居中*/
            background-color: #ffd800;
            border: solid 1px #ff6a00; /*边框1px*/
        
        #content 
            padding: 50px; /*边距*/
            display: none; /*内容隐藏*/
        
    </style>
</head>
<body>
    <!--淡入淡出-->
    <button id="in">fadeIn</button>
    <button id="out">fadeOut</button>
    <button id="toggle">fadetoggle</button>
    <button id="to">fadeto</button>
    <div id="div1" style="width:80px;display:none; height:80px;background-color:aqua"></div>
    <div id="div2" style="width: 80px; display: none; height: 80px; background-color: #b6ff00"></div>
    <div id="div3" style="width: 80px; display: none; height: 80px; background-color: #0026ff"></div>

    <!--滑动-->
    <div id="flipshow">出现</div>
    <div id="fliphide">隐藏</div>
    <div id="fliptoggle">隐藏显示</div>
    <div id="content">Hello World</div>

    <!--回调-->
    <button id="btn1">隐藏</button>
    <p>hello Worldhello Worldhello World</p>
</body>
</html>

JS文件：

$(document).ready(function () 
    //显示隐藏
    $("#in").on("click", function () 
        $("#div1").fadeIn(1000);
        $("#div2").fadeIn(1000);
        $("#div3").fadeIn(1000);

    );

    $("#out").on("click", function () 
        $("#div1").fadeOut(1000);
        $("#div2").fadeOut(1000);
        $("#div3").fadeOut(1000);
    );
    $("#toggle").on("click", function () 
        //$("#div1").fadeToggle(1000);
        //$("#div2").fadeToggle(1000);
        //$("#div3").fadeToggle(1000);

        console.log("D" + document);
        console.log("D");
    );
    $("#to").on("click", function () 
        $("#div1").fadeTo(1000,0.5);//第二个参数为透明度0-1
        $("#div2").fadeTo(1000,0.7);
        $("#div3").fadeTo(1000,0.3);
    );

    //滑动
    $("#flipshow").click(function () 
        $("#content").slideDown(1000);//隐藏到显示为1S
    )
    $("#fliphide").click(function () 
        $("#content").slideUp(1000);//显示到隐藏为1S
    )
    $("#fliptoggle").click(function () 
        $("#content").slideToggle(1000);//
    )
    
    //回调
    $("#btn1").click(function () 
        $("p").hide(1000, function () 
            alert("动画结束方法被回调");
        );
        //执行多个动画
        $("p").css("color", "red").slideUp(1000).slideDown(1000);
    );
);

　　

jQuery动画（显示隐藏，淡入淡出，滑动）

目录

分类

基本动画函数

显示元素

交替显示隐藏

滑动效果

向上收缩效果

向下展开效果

交替伸缩样式

淡入淡出效果

淡入效果

淡出效果

自定义不透明度

jQuery的动画函数

分类

基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数

滑动动画函数：仅使用滑动渐变效果

淡入淡出动画函数：仅使用透明度渐变效果

基本动画函数

显示元素

jQuery中用来显示已经被隐藏的元素的方法是使用 show(speed,[callback]) 函数，他的动画效果是向左上角缩小，并且元素本身逐渐变淡直至消失。

隐藏已经显示的元素的方法是使用 hide(speed,[callback]) 函数（参数与显示函数的参数含义相同）

函数名show(speed,[callback])
作用以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)： 在动画完成时执行的函数，每个元素执行一次

交替显示隐藏

所谓交替显示隐藏，就是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。

jQuery中用于实现交替显示隐藏的函数是 toggle(speed,[callback]) 

函数名toggle(speed,[callback])
作用以优雅的动画切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)： 在动画完成时执行的函数，每个元素执行一次

滑动效果

向上收缩效果

向上收缩效果就是对页面元素通过高度变化（向上减小）来动态地隐藏。在jQuery中实现该效果的函数是 slideUp(speed,[callback])  。

函数名 slideUp(speed,[callback]) 
作用通过高度变化来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)： 在动画完成时执行的函数，每个元素执行一次

向下展开效果

向上收缩用于元素的隐藏，向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为 slideDown(speed,[callback]) ​​​​​​​ 。

函数名slideDown(speed,[callback])
作用通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)： 在动画完成时执行的函数，每个元素执行一次

交替伸缩样式

交替伸缩样式和交替显示隐藏类似，都是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是 slideToggle(speed,[callback])  。

函数名slideToggle(speed,[callback])
作用通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
返回值jQuery
参数

speed(String,Number)：种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)：在动画完成时执行的函数，每个元素执行一次

淡入淡出效果

淡入淡出效果我们在电影以及PowerPoint演示中经常见到，它是实现画面融入背景渐渐消失或者从纯色背景逐渐显示的效果。从实现上来讲就是控制画面本身的不透明度来实现其显示和隐藏效果。

淡入效果

淡入效果是指页面上元素的透明度不断减小，直到清晰显示出来的效果。在jQuery中实现淡入效果使用 fadeIn(speed,[callback]) 函数。

函数名fadeIn(speed,[callback])
作用通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)：在动画完成时执行的函数，每个元素执行一次

淡出效果

淡出效果是指页面上元素的透明度不断增大，直到消失不见的效果。jQuery中处理淡出效果的是 fadeOut(speed,[callback]) 函数。

函数名fadeOut(speed,[callback]) 
作用通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

callback (Function)：在动画完成时执行的函数，每个元素执行一次

自定义不透明度

fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素，要么是完全隐藏元素，不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态，换句话说就是设定最终的元素为半透明状态。它就是 fadeTo(speed,opacity,[callback]) 函数。

函数名fadeTo(speed,opacity,[callback])
作用把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
返回值jQuery
参数

speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。

opacity (Number)：要调整到的不透明度值(0到1之间的数字)。

callback (Function)：（可选）在动画完成时执行的函数。

以上是关于jQuery效果-淡入淡出-滑动-回调的主要内容，如果未能解决你的问题，请参考以下文章

jQuery动画（显示隐藏，淡入淡出，滑动）

JQuery: JQuery效果（隐藏显示切换，滑动，淡入淡出，以及动画）

导航上的淡入淡出和滑动效果（jQuery）

jQuery效果：隐藏显示切换滑动淡入淡出动画

jquery效果- 显示和隐藏 淡入淡出 滑动 隐藏

jQuery 学习02——效果：隐藏/显示淡入淡出滑动动画停止动画Callback链