jQuery有很我的效果可以实现，比如说淡入淡出的效果:<html>
    <head>
        <style>
            #box{width:200px;height:200px;background:red;opacity:1;}
        </style>
    </head>
    <body>
        <div id="box">
        </div>
        <input type="button" value="隐藏/显示"id="bt1"><br/><br/>
        <input type="button" value="淡入"id="bt2"><br/><br/>
        <input type="button" value="淡出"id="bt3"><br/><br/>
        <input type="button" value="滑入"id="bt4"><br/><br/>
        <input type="button" value="滑出"id="bt5"><br/><br/>
        <input type="button" value="半透明"id="bt6"><br/><br/>
        <input type="button" value="滑入/滑出"id="bt7"><br/><br/>
        <input type="button" value="淡入入/淡出"id="bt7"><br/><br/>
    </body>
    <script src="jquery-1.6.js"></script>
    <script>
        $(function(){
                $("#bt1").click(function(){

$("#box").toggle(1000)
                            }),
                $("#bt2").click(function(){

$("#box").slideDown(1500)
                            }),
                $("#bt3").click(function(){

$("#box").slideUp(1500)
                            }),
                $("#bt4").click(function(){

$("#box").fadeIn(1000)
                            }),
                $("#bt5").click(function(){

$("#box").fadeOut(1000)
                            }),
                $("#bt6").click(function(){

$("#box").fadeTo(1500,0.4)
                            }),
                $("#bt7").click(function(){
                            $("#box").fadeToggle(1000)
                            }),
                $("#bt8").click(function(){
                            $("box").slideToggle(1500)
                            })
                })
                              
    </script>
</html>

　　jQuery也可以来实现一个滚动字幕的效果，比如说下边这个例子：<html>
    <head>
        <style>
            #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
            
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function(){
                str="我是中国人"
                $("#box").html(str)
                setInterval(go,300)
                    function go(){
                        str=str.substr(1)+str.substr(0,1)
                        $("#box").html(str)
                        }    
            })
    </script>
</html>

jQuery可以用来实现一个删除功能的实现,比如：<html>
    <head>
        <style>
            #box{
                width:400px;
                height:200px;
                border:1px solid black;
                }
        </style>
    </head>
    <body>
        <div id="box">
                <p id="a">第一a</p>
                <p>第二</p>
                <p id="a">第三a</p>
                <p>第四</p>
        </div>
        <button id="del">删除</button>
        <button id="cle">清空</button>
    </body>
    <script src="jquery-1.6.js"></script>
    <script>
        $(function(){
                $("#del").click(
                        function(){
                            $("p").remove("#a")
                            });
                $("#cle").click(
                        function(){
                            $("#box").empty()
                            });
            })
    </script>
</html>

jQuery还会做出一选课功能的实现,比如:<html>
<head>
<title></title>
<style>
li{
    list-style:none;
}
#you{
    position:absolute;
    left:300px;
    top:10px;
}
ul{
    position:absolute;
    left:150px;
    top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
    $(function(){
        $("button:first").click(function(){
            $("#zuo>option:selected").prependTo($("#you"));
            //$("#you").append($("#zuo>option:selected");
        })
        $("button:eq(1)").click(function(){
            $("#you>option:selected").appendTo($("#zuo"));
            //$("#you").append($("#zuo>option:selected");
        })
        $("button:eq(2)").click(function(){
            $("#zuo>option").appendTo($("#you"));
            
        })
        $("button:eq(3)").click(function(){
            $("#you>option").appendTo($("#zuo"));
            
        })
        $("button:eq(4)").click(function(){
              //$("#zuo>option:first").before($("#zuo>option:selected"))
            $("#zuo>option:selected").prependTo($("#zuo"));
            
        })
        $("button:eq(5)").click(function(){
            //  $("#zuo>option:last").after($("#zuo>option:selected"))
            $("#zuo>option:selected").appendTo($("#zuo"));
            
        })
        $("button:eq(6)").click(function(){
         $("#zuo>option:selected").prev().before($("#zuo>option:selected")) ;   
            
        })
        $("button:eq(7)").click(function(){
         $("#zuo>option:selected").next().after($("#zuo>option:selected")) ;   
            
        })
    })
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
    <option>职业英语</option>
    <option>高等数学</option>
    <option>大学语文</option>
    <option>大学物理</option>
    <option>计算机基础</option>
    <option>基本网页设计</option>
    <option>c语言程序设计</option>
    <option>数据结构</option>
    <option>UI设计</option>
    <option>产品脚本设计</option>
    <option>产品脚本提高</option>
    <option>产品脚本实战</option>
</select>
<ul>
<li><button>选择</button></li>
<li><button>退选</button></li>
<li><button>全选</button></li>
<li><button>全退</button></li>
<li><button>置顶</button></li>
<li><button>置底</button></li>
<li><button>上移</button></li>
<li><button>下移</button></li>
</ul>
<select size="10" id="you" style="width:100px">

</select>

</body>
</html>

jQuery还能够实现下滑框功能:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
 
<body>
 
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
 
<p class="flip">请点击这里</p>
 
</body>
</html>
jQuery能够实现简单的动画效果：<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script>
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery能实现一个动画的开始与停止的功能:<html>
    <head>
        <style>
            #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
        </style>
    </head>
    <body>
        <div id="box"></div>
        <button id="bt">开始</button>
        <button id="bt1">停止</button>
    </body>
    <script src="jquery-1.6.js"></script>
    <script>
        
        $(function(){
                $("#bt").click(function(){
                            $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
                            }),
                $("#bt1").click(function(){
                            $("div").stop();
                            })            
                })
    </script>
</html>

jQuery还能做一些向上轮播图片广告的功能:<html>
    <head>
        <style>
            #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
            ul{list-style:none;}
            img{width:600px;height:300px;}
            *{padding:0;margin:0;}
        </style>
    </head>
    <body>
        
        <div id="box">
            <ul id="pic">
                <li><img src="1.png"></li>
                <li><img src="2.png"></li>
                <li><img src="3.png"></li>
                <li><img src="4.png"></li>
                <li><img src="1.png"></li>
            </ul>
        </div>
    </body>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
        $(function(){
                m=0;
                p=setInterval(go,100)
                function go(){
                        m+=20;
                        $("#pic").css("margin-top",-m+"px")
                        if(m>=1200){m=0}
                        }
            })
    </script>
</html>

jQuery还能实现两个下拉展开于闭合的效果于一体的:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>

</body>
</html>

　　以上就是我分享给大家的，谢谢。

jQuery效果函数的更多相关文章

  1. jQuery 效果函数

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  2. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  3. jQuery 效果函数（三）

    方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数(仍未运行)设置延迟 de ...

  4. jquery 动画总结（主要指效果函数）

    动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种:1 gif动画---这就是帧动画,把若干 ...

  5. jQuery的效果函数

    jQuery的效果函数有很多,下面让我们一起看看jQuery的效果函数吧: jQuery的效果函数列表: animate():对被选元素应用“自定义”的动画. clearQueue():对被选元素移除 ...

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

    JQuery:效果 JQuery效果有很多,包括隐藏.显示.切换,滑动,淡入淡出,以及动画等.隐藏:JQuery hide() 显示:JQuery show() 切换:JQuery toggle() ...

  7. Jq_选择器、效果函数

    JQuery 选择器 选择器                     实例                                   选取 *                         ...

  8. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

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

    jQuery效果 隐藏.显示.切换.滑动.淡入淡出.以及动画 1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示 toggle()方法:可以使用它来切换hi ...

随机推荐

  1. python：python2与python3共存时，pip冲突，提示Fatal error in launcher: Unable to create process using '"d:\python27\python2.exe" "D:\Python27\Scripts\pip2.exe" '

    问题背景: 机器上同时装了python2.和python3后,导致只能用pip3了,使用pip2时提示:Fatal error in launcher: Unable to create proces ...

  2. input标签自动填充问题

    <input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...

  3. 5、1 es 数据库和mysql 数据库同步 （Windows操作系统）

    (1)在logstash-5.6.8安装目录下创建文件夹mysqletc (名称随意) (2)文件夹下创建mysql.conf (名称随意) ,内容如下: input { jdbc { #sc表 jd ...

  4. Linux软件安装管理---源码安装

    在Linux平台下,软件包的类型可以划分为两类:源码包.二进制包. 源码包: 即程序软件的源代码(一般也叫Tarball,即将软件的源码以tar打包后再压缩的资源包). 二进制包: 如 Red Hat ...

  5. BP（back propagation）误差逆传播神经网络

    [学习笔记] BP神经网络是一种按误差反向传播的神经网络,它的基本思想还是梯度下降法,中间隐含层的误差和最后一层的误差存在一定的数学关系,(可以计算出来),就像误差被反向传回来了,所以顾名思义BP.想 ...

  6. 自定义 Win10 系统鼠标右键发送到的选项

    系统默认的右键「发送到」菜单只有几个特定的项目,如果要想发送到其他目标,可通过在资源管理器地址栏中访问 C:\Users\用户名\AppData\Roaming\Microsoft\Windows\S ...

  7. 猴子补丁(Monkey Patching)

    猴子补丁是我在面试的时候接触的一到题,学python的时候,我根本就没有听说这个概念!那接下来我们来分析一下: 1.什么是猴子补丁? 2.猴子补丁的功能? 3.猴子补丁的应用场景? 一.什么是猴子补丁 ...

  8. 十一、三星平台framebuffer驱动

    和总线设备驱动模型类似,framebuffer分为核心层.驱动层和设备层. 核心层:就是上一章分析的fbmem.c文件 驱动层(控制器层):一般由芯片原厂提供,实现了LCD控制器通用的操作接口和配置接 ...

  9. 安全篇-AES/RSA加密机制

    在服务器与终端设备进行HTTP通讯时,常常会被网络抓包.反编译(Android APK反编译工具)等技术得到HTTP通讯接口地址和参数.为了确保信息的安全,我们采用AES+RSA组合的方式进行接口参数 ...

  10. QLineEdit的信号函数

    QLineEdit一共有6个信号函数,并不多,很好理解. ·void cursorPositionChanged( intold, intnew ) 当鼠标移动时发出此信号,old为先前的位置,new ...