zoukankan      html  css  js  c++  java
  • jQuery 效果使用

    .hide()
      隐藏匹配的元素。
      .hide()
        这个方法不接受任何参数。
      .hide([duration][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画执行完时执行的函数。
      .hide([duration][,easing][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        easing
          一个字符串,表示过渡使用哪种缓动函数。
        complete
          在动画完成时执行的函数。
      用法:

    $('button').click(function(){
          $('p').hide(2000)
        });
        $("div").click(function(){
          $(this).hide(2000,function(){
          $(this).remove()
          })
        }) 

    .show()
      显示匹配的元素。
      .show()
        这个方法不接受任何参数。
      .show([duration][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画执行完时执行的函数。
      .show([duration][,easing][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        easing
          一个字符串,表示过渡使用哪种缓动函数。
        complete
          在动画完成时执行的函数。
      用法:

     $("button").click(function () {
            $("p").show("slow");
        });
    
        $("div").first().show("fast", function showNext() {
          $(this).next("div").show("fast", showNext);
        });

    .toggle()
      显示或隐藏匹配的元素。
      .toggle()
        这个方法不接受任何参数。
      .toggle([duration][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画执行完时执行的函数。
      .toggle([duration][,easing][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        easing
          一个字符串,表示过渡使用哪种缓动函数。
        complete
          在动画完成时执行的函数。
      用法:

      $("button").click(function () {
          $("p").toggle();
        });
    
        $("button").click(function () {
          $("p").toggle("slow");
        });

    .animate()
      根据一组css属性,执行自定义动画。
      .animate(properties[,duration][,easing][,complete])
        properties
          一个css 属性和值的对象,动画将根据这组对象移动。
        duration(默认:400)
          一个字符串或者数字决定动画将运行多久。
        easing(默认 swing)
          一个字符串,表示过度使用哪种缓动函数。
          complete
            在动画执行完时执行的函数。
       .animate(properties,options)
          properties
            一个CSS属性和值的对象,动画将根据这组对象移动。
          options
            一组包含动画选项的值的集合。
      用法:

     $("#go").click(function(){
          $("#block").animate({
             "70%",
            opacity: 0.4,
            marginLeft: "0.6in",
            fontSize: "3em",
            borderWidth: "10px"
           }, 1500 );
        });
    
        $("#right").click(function(){
          $(".block").animate({"left": "+=50px"}, "slow");
        });

        对所有段落应用动画,使其 left 属性变为 50,透明度变为 1(即,不透明,可见),用时 500 毫秒。

    $( "p" ).animate({
          left: 50, opacity: 1
        }, 500 );

    .delay()
      设置一个延时来推迟执行队列中后续的项。
      .delay(duration[,queueName])
        duration
          一个整数,指示的毫秒数,用于设定下一个队列推迟执行的时间。
        queueName
          一个作为队列名的字符串。
      效果:
        我们可以在 <div id="foo"> 的 .slideUp() 和 .fadeIn() 动画之间设置800毫秒的延时:
        $('#foo').slideUp(300).delay(800).fadeIn(400);

        隐藏再显示两个div。其中绿色的div在显示之前,有800毫秒的延时。

     $("button").click(function() {
            $("div.first").slideUp(300).delay(800).fadeIn(400);
            $("div.second").slideUp(300).fadeIn(400);
      });

    .stop()
       停止匹配元素当前正在运行的动画。
       .stop([clearQueue][,jumpToEnd])
        clearQueue
          一个布尔值,指示是否取消以队列动画,默认 false;
        jumpToEnd
          一个布尔值指示是否当前动画立即完成。默认false;
       .stop([queue ] [, clearQueue ] [, jumpToEnd ] )
          queue
            停止动画队列的名称。
          clearQueue
            一个布尔值,指示是否取消以列队动画。默认 false.
          jumpToEnd
            一个布尔值指示是否当前动画立即完成。默认false.
      用法:

    $("#stop").click(function(){
          $(".block").stop();
          }); //当点击这个运算的时候 立即停止动画。

    .fadeIn()
      通过淡入的方式显示匹配的元素。
      .fadeIn([duration][,complete])
        duration(默认:400)
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画完成时执行的函数。
      .fadeIn(options)
        一组包含动画选项的值的集合。
      .fadeIn([duration][,easing][,complete])
        duration(默认:400)
          一个字符串或者数字决定动画将运行多久。
        easing(默认:swing)
          一个字符串,表示过渡使用哪种缓动函数
        complete
          在动画完成时执行的函数。
      用法:

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

    .fadeOut()
      通过淡出的方式隐藏匹配元素。
      .fadeOut([duration][,complete])
        duration(默认:400)
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画完成时执行的函数。
      .fadeOut(options)
        一组包含动画选项的值的集合。
      .fadeOut([duration][,easing][,complete])
        duration(默认:400)
          一个字符串或者数字决定动画将运行多久。
        easing(默认:swing)
          一个字符串,表示过渡使用哪种缓动函数
        complete
          在动画完成时执行的函数。
      用法:

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

    .fadeTo()
       调整匹配元素的透明度。
       .fadeTo(duration,opacity[,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        opacity
          0和1之间的数字表示目标元素的不透明度
        complete
          在动画完成时执行的函数。
        .fadeTo(duration,opacity[,easing][,complete])
          duration
            一个字符串或者数字决定动画将运行多久。
          opacity
            0和1之间的数字表示目标元素的不透明度
          easing
            一个字符串,表示过渡使用哪种缓动函数
          complete
            在动画完成时执行的函数。
        用法:

         $('input').click(function(){
              $('#div1').fadeTo("slow",0.2,function(){
                  $('#div1').css("display","none");
              })
          })

    .fadeToggle()
      通过匹配元素的不透明度动画,来显示或者隐藏他们。
        .fadeToggle([duration][,easing][,complete])
          duration(默认:400)
            一个字符串或者数字决定动画将运行多久。
          easing(默认:swing)
            一个字符串,表示过渡使用哪种缓动函数
          complete
            在动画完成时执行的函数。
        .fadeToggle(opacity)
          opacity
            一组包含动画选项的值的集合。
        用法:

       $("input").click(function(){
            $('#div1').fadeToggle(2000)
        })

    .slideDown()
      用滑动动画显示一个匹配元素。
        .slideDown([duration][,complete])
          duration
            一个字符串或者数字决定动画将运行多久。
          complete
            在动画完成时执行的函数。
        .slideDown(opacity)
           opacity
             一组包含动画选项的值的集合。
        .slideDown([duration][,easing][,complete])
          duration
            一个字符串或者数字决定动画将运行多久。
          easing
            一个字符串,表示过度使用哪种缓动函数。
          complete
            在动画完成时执行的函数。
        用法:

    $("input").click(function(){
              $('#div1').slideDown(2000)
          })

    .slideUp()
      用滑动动画隐藏一个匹配元素。
      .slideUp([duration][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画完成时执行的函数。
      .slideUp(opacity)
        opacity
        一组包含动画选项的值的集合。
      .slideUp([duration][,easing][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        easing
          一个字符串,表示过度使用哪种缓动函数。
        complete
          在动画完成时执行的函数。
      用法:

     $("input").click(function(){
          $('#div1').slideUp(2000)
      })


    .slideToggle()
      用滑动动画显示或隐藏一个匹配的元素。
      .slideToggle([duration][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        complete
          在动画完成时执行的函数。
      .slideToggle(opacity)
        opacity
          一组包含动画选项的值的集合。
      .slideToggle([duration][,easing][,complete])
        duration
          一个字符串或者数字决定动画将运行多久。
        easing
          一个字符串,表示过度使用哪种缓动函数。
        complete
          在动画完成时执行的函数。
      效果:

       $("input").click(function(){
          $('#div1').slideToggle(2000)
        })
  • 相关阅读:
    小故事
    设计模式
    git分支
    git简单操作
    ab命令压力测试
    libcheck ARM交叉编译
    libxml2 ARM 交叉编译
    I.MX6 安装LTIB
    为ARM编译Glib
    QT 4.8 中文显示问题
  • 原文地址:https://www.cnblogs.com/nmxs/p/4984728.html
Copyright © 2011-2022 走看看