• jQuery 效果


    show()

    显示隐藏的匹配元素。

    这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

    $("p").show()

    $("p").show("slow");
    $("p").show(4000,function(){
       $(this).text("Animation Done...");
     });

    hide()

    隐藏显示的元素

    这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

    toggle()

    用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

    [speed] [,fn]String,FunctionV1.0

    speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"

    fn:在动画完成时执行的函数,每个元素执行一次。

    [speed], [easing ], [fn ] String,String,FunctionV1.4.3

    speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值:slow,normal,fast。"

    easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear"

    fn:在动画完成时执行的函数,每个元素执行一次。

    switchBooleanV1.3

    用于确定显示/隐藏的开关。如:true - 显示元素,false - 隐藏元素

    $('td).toggle();
    $("td").toggle(
      function () {
        $(this).addClass("selected");
      },
      function () {
        $(this).removeClass("selected");
      }
    );

    $("p").toggle("slow");


    slideDown()

    通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

    这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。

    
    

    描述:

    
    

    以滑动方式显示隐藏的 <p> 元素:

    
    
    jQuery 代码:
    
    
    $(".btn2").click(function(){
      $("p").slideDown();
    });
    
    

    描述:

    
    

    用600毫秒缓慢的将段落滑下

    
    
    jQuery 代码:
    
    
    $("p").slideDown("slow");
    
    

    描述:

    
    

    用200毫秒快速将段落滑下,之后弹出一个对话框

    
    
    jQuery 代码:
    
    
    $("p").slideDown("fast",function(){
       alert("Animation Done.");
     });
     
    slideUp()
    slideToggle()

    通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

    这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

    描述:

    用600毫秒缓慢的将段落滑上或滑下

    jQuery 代码:
    $("p").slideToggle("slow");

    描述:

    用200毫秒快速将段落滑上或滑下,之后弹出一个对话框

    jQuery 代码:
    $("p").slideToggle("fast",function(){
       alert("Animation Done.");
     });




    fadeIn()

    通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

    这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    $("p").fadeIn("slow");
    ("p").fadeIn("fast",function(){
       alert("Animation Done.");
     });
    fadeOut()
    fadeTo()

    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

    这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    $(".btn2").click(function(){
      $("p").fadeIn();
    });


    $("p").fadeTo("slow", 0.66);



    fadeToggle()

    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

    这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    
    

    描述:

    
    

    用600毫秒缓慢的将段落淡入

    
    
    jQuery 代码:
    
    
    $("p").fadeToggle("slow","linear");
    
    

    描述:

    
    

    用200毫秒快速将段落淡入,之后弹出一个对话框

    
    
    jQuery 代码:
    
    
    $("p").fadeToggle("fast",function(){
       alert("Animation Done.");
     });



    animate()
    $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
    });
    $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
    });
    
    
    
    $("#go").click(function () {
        $("#block").animate({
             "90%",
            height: "100%",
            fontSize: "10em",
            borderWidth: 10
        }, 1000);
    });


    $(".btn1").click(function(){
    $("#box").animate({height:"300px"},8000).animate({"300px"});
    });
    $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
    });

    
    

    stop() 学习网址

    http://www.cnblogs.com/vincent_ds/archive/2012/09/23/2699048.html

    http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html

    delay()
    设置一个延时来推迟执行队列中之后的项目。
    $('#foo').slideUp(300).delay(800).fadeIn(400);


    finish()

    停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。

    当.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(所有动画的目标值)。所有排队的动画将被删除。

    如果第一个参数提供,该字符串表示的队列中的动画将被停止。

    .finish()方法和.stop(true, true)很相似,.stop(true, true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。

    $("#complete").click(function(){
      $("div").finish();
    });
     
  • 相关阅读:
    20201224-3
    20201224-3 列表的使用1
    20201224 字符串常用操作
    20201224-1
    20201223-1 俄罗斯方块
    3月27日:毕业设计计划
    3月26日:毕业设计计划
    3月25日:毕业设计计划
    3月24日:毕业设计计划
    3月23日:毕业设计计划
  • 原文地址:https://www.cnblogs.com/MdpHappyForEver/p/5406380.html
Copyright © 2020-2023  润新知