• jQuery的效果


    jQuery的效果

    jQuery的效果一共有5类,接下来我们就看看都有什么????
    1. 基本
    2. 滑动
    3. 淡入淡出
    4. 自定义
    5. 设置

    接下来看看基本都有哪几种???

    基本的html代码!!!
    <p style="display: none">Hello</p>
    <input type="button" id="btn" value="tooggle">
    
    基本的jQuery代码!!!
    <script type="text/javascript">
        //显示隐藏的匹配元素。
        $("p").show("slow");
        //隐藏显示的元素
        $("p").hide();
        //如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
        $("p").toggle();  	
        //用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
        function a(){
        	alert("test1")
        }
        function b(){
        	alert("test2")
        }
        function c(){
        	alert("test3")
        }
        $("#btn").click().toggle(a,b,c)
    </script>
    

    接下来看看滑动都有哪几种???

    滑动的html代码!!!
    <div style="100px;height:100px;background:red;display:none"></div>
    <input type="button" id="btn" value="向下">
    <input type="button" id="btn1" value="向上">
    <input type="button" id="btn2" value="切换">
    
    滑动的jQuery代码!!!
    <script type="text/javascript">
        //通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。
        $("#btn").click(function(){
          $("div").slideDown();
        });
        //通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。
        $("#btn1").click(function(){
          $("div").slideUp();
        });
        //通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
        $("#btn2").click(function(){
          $("div").slideToggle();
        });
    </script>
    

    接下来看看淡入淡出都有哪几种???

    淡入淡出的html代码!!!
    <div style="100px;height:100px;background:red;display:none"></div>
    <input type="button" id="btn" value="淡入">
    <input type="button" id="btn1" value="淡出">
    <input type="button" id="btn2" value="切换">
    <input type="button" id="btn3" value="fadeTo">
    
    淡入淡出的jQuery代码!!!
    <script type="text/javascript">
        //通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。
        $("#btn").click(function(){
        	$("div").fadeIn(3000);
        });
        //通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
        $("#btn1").click(function(){
        	$("div").fadeOut(3000);
        });
        //通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。
        $("#btn2").click(function(){
        	$("div").fadeToggle(3000);
        });
        //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
        $("#btn3").click(function(){
        	$("div").fadeTo("slow",0.5);
        });
    </script>
    

    接下来看看自定义都有哪几种???

    自定义的html代码!!!
    <div style="100px;height:100px;background:red">姜筱妍</div>
    <input type="button" name="" value="开始" id="btn">
    <input type="button" name="" value="停止" id="btn1">
    
    自定义的jQuery代码!!!
    <script type="text/javascript">
        //animate用于创建自定义动画的函数。
        //delay设置一个延时来推迟执行队列中之后的项目。
        $("#btn").click(function(){
          $("div").delay(3000).animate({ 
            "width": "500px",
            "height": "300px", 
            "fontSize": "5em",
          }, 3000 );
        });
        //stop停止所有在指定元素上正在运行的动画。
        $("#btn1").click(function(){
          $("div").stop();
        });
    </script>
    
    自定义的动画效果!!!


    接下来看看设置都有哪几种???

    jQuery.fx.off
    关闭页面上所有的动画。
    jQuery.fx.interval
    设置动画的显示帧速。

    亲们几天的代码学的怎么样!!!我们来开心一下吧!!!



  • 相关阅读:
    超级女声杭州赛区7进5
    究竟怎么了?
    最近发现
    S2SH基于角色权限拦截
    基于S2SH的电子商务网站系统性能优化
    TSQL复习笔记(一)
    用户sa登录失败,该用户与可信sql server连接无关联
    SQL附加数据库报5120的错误的解决办法
    DotNet中配置文件的使用(一)
    JQuery中使用AJAX $.ajax(prop)方法详解
  • 原文地址:https://www.cnblogs.com/jianghongyan/p/6866767.html
Copyright © 2020-2023  润新知