Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung des JQuery-Effekts using_jquery

Ausführliche Erläuterung des JQuery-Effekts using_jquery

WBOY
Freigeben: 2016-05-16 15:30:39
Original
1113 Leute haben es durchsucht

jQuery ist eine ausgezeichnete JS-Entwicklungsbibliotheksklasse, die so gut wie ein Prototyp ist, insbesondere ihre Unterstützung für CSS und XPath, was es für uns bequemer macht, JS zu schreiben! Wenn Sie kein JS-Experte sind und hervorragende JS-Effekte schreiben möchten, kann Ihnen jQuery dabei helfen, Ihr Ziel zu erreichen!

.hide()

Übereinstimmende Elemente ausblenden.

 .hide()

Diese Methode akzeptiert keine Parameter.

 .hide([Dauer][,vollständig])
  Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​.hide([duration][,easing][,complete])
  Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  Lockerung

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen

Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.
Verwendung:

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

 .show()

Passende Elemente anzeigen.

 .show()

Diese Methode akzeptiert keine Parameter.
​.show([Dauer][,vollständig])
  Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​.show([Dauer][,Easing][,Complete])
  Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  Lockerung

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen

Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.

Verwendung:

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

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

Nach dem Login kopieren

.toggle()

Passende Elemente ein- oder ausblenden.

 .toggle()

Diese Methode akzeptiert keine Parameter.
​.toggle([Dauer][,vollständig])
  Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​.toggle([Dauer][,Erleichterung][,vollständig])
  Dauer

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  Lockerung

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen

Funktion, die ausgeführt werden soll, wenn die Animation abgeschlossen ist.

Verwendung:

    $("button").click(function () {
      $("p").toggle();
    });
    $("button").click(function () {
      $("p").toggle("slow");
    });
Nach dem Login kopieren

.animate()

Führen Sie eine benutzerdefinierte Animation basierend auf einer Reihe von CSS-Eigenschaften aus.

 .animate(properties[,duration][,easing][,complete])
Eigenschaften

   Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend dieser Gruppe von Objekten.
Dauer (Standard: 400)

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  Lockerung (Standardschwung)

Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion überbeansprucht wird.
Abgeschlossen

Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
​​.animate(properties,options)
  Eigenschaften

Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend dieser Gruppe von Objekten.
  Optionen

Eine Sammlung von Werten, die Animationsoptionen enthalten.

Verwendung:

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

    $("#right").click(function(){
      $(".block").animate({"left": "+=50px"}, "slow");
    });
Nach dem Login kopieren

Wenden Sie eine Animation auf alle Absätze an, sodass ihre linke Eigenschaft 50 und ihre Transparenz 500 Millisekunden lang 1 (d. h. undurchsichtig, sichtbar) wird.

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

.delay()

  设置一个延时来推迟执行队列中后续的项。

  .delay(duration[,queueName])
    duration

      一个整数,指示的毫秒数,用于设定下一个队列推迟执行的时间。
    queueName

      一个作为队列名的字符串。

  效果:

    我们可以在

的 .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);
  });
Nach dem Login kopieren

.stop()

   停止匹配元素当前正在运行的动画。

   .stop([clearQueue][,jumpToEnd])
    clearQueue

      一个布尔值,指示是否取消以队列动画,默认 false;
    jumpToEnd

      一个布尔值指示是否当前动画立即完成。默认false;
   .stop([queue ] [, clearQueue ] [, jumpToEnd ] )
      queue

        停止动画队列的名称。
      clearQueue

        一个布尔值,指示是否取消以列队动画。默认 false.
      jumpToEnd

        一个布尔值指示是否当前动画立即完成。默认false.

  用法:  

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

.fadeIn()

  通过淡入的方式显示匹配的元素。

  .fadeIn([duration][,complete])
    duration(默认:400)

     一个字符串或者数字决定动画将运行多久。

    complete

      在动画完成时执行的函数。
  .fadeIn(options)

    一组包含动画选项的值的集合。
  .fadeIn([duration][,easing][,complete])
    duration(默认:400)

      一个字符串或者数字决定动画将运行多久。

    easing(默认:swing)

      一个字符串,表示过渡使用哪种缓动函数

    complete

      在动画完成时执行的函数。 

用法:

  $(".btn2").click(function(){
        $("p").fadeIn();
    });
Nach dem Login kopieren

.fadeOut()

  通过淡出的方式隐藏匹配元素。

  .fadeOut([duration][,complete])
    duration(默认:400)

      一个字符串或者数字决定动画将运行多久。
    complete

      在动画完成时执行的函数。
  .fadeOut(options)

    一组包含动画选项的值的集合。
  .fadeOut([duration][,easing][,complete])
    duration(默认:400)

      一个字符串或者数字决定动画将运行多久。
    easing(默认:swing)

      一个字符串,表示过渡使用哪种缓动函数
    complete

      在动画完成时执行的函数。

  用法:

    $(".btn2").click(function(){
        $("p").fadeOut();
    });
Nach dem Login kopieren

.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");
          })
      })
Nach dem Login kopieren

.fadeToggle()

  通过匹配元素的不透明度动画,来显示或者隐藏他们。

    .fadeToggle([duration][,easing][,complete])
      duration(默认:400)

        一个字符串或者数字决定动画将运行多久。
      easing(默认:swing)

        一个字符串,表示过渡使用哪种缓动函数
      complete

        在动画完成时执行的函数。
    .fadeToggle(opacity)
      opacity

        一组包含动画选项的值的集合。

    用法:

      $("input").click(function(){
        $('#div1').fadeToggle(2000)
    })
Nach dem Login kopieren

.slideDown()

  用滑动动画显示一个匹配元素。

    .slideDown([duration][,complete])
      duration

        一个字符串或者数字决定动画将运行多久。
      complete

        在动画完成时执行的函数。
    .slideDown(opacity)
       opacity

         一组包含动画选项的值的集合。
    .slideDown([duration][,easing][,complete])
      duration

        一个字符串或者数字决定动画将运行多久。

      easing

        一个字符串,表示过度使用哪种缓动函数。

      complete

        在动画完成时执行的函数。

    用法:

 $("input").click(function(){
          $('#div1').slideDown(2000)
      })
Nach dem Login kopieren

.slideUp()

  用滑动动画隐藏一个匹配元素。

  .slideUp([duration][,complete])
    duration

      一个字符串或者数字决定动画将运行多久。
    complete

      在动画完成时执行的函数。
  .slideUp(opacity)

    opacity

    一组包含动画选项的值的集合。
  .slideUp([duration][,easing][,complete])
    duration

      一个字符串或者数字决定动画将运行多久。

    easing

      一个字符串,表示过度使用哪种缓动函数。

    complete

      在动画完成时执行的函数。

  用法:

    $("input").click(function(){
      $('#div1').slideUp(2000)
  })
Nach dem Login kopieren

.slideToggle()

  用滑动动画显示或隐藏一个匹配的元素。

  .slideToggle([duration][,complete])
    duration

      一个字符串或者数字决定动画将运行多久。
    complete

      在动画完成时执行的函数。
  .slideToggle(opacity)
    opacity

      一组包含动画选项的值的集合。
  .slideToggle([duration][,easing][,complete])
    duration

      一个字符串或者数字决定动画将运行多久。

    easing

      一个字符串,表示过度使用哪种缓动函数。

    complete

      在动画完成时执行的函数。

  效果:

  $("input").click(function(){
      $('#div1').slideToggle(2000)
    })
Nach dem Login kopieren

以上内容是小编给大家介绍的Jquery 效果使用详解,希望大家喜欢。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage