Heim > Web-Frontend > js-Tutorial > Verwendung des jQuery-Effekts

Verwendung des jQuery-Effekts

黄舟
Freigeben: 2016-12-15 15:02:35
Original
1096 Leute haben es durchsucht

.hide()
Übereinstimmende Elemente ausblenden.
 .hide()
 Diese Methode akzeptiert keine Parameter.
.hide([duration][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
.hide([duration][,easing][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 easing
 Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$('button').click(function(){
$('p').hide(2000)
});
$("div") .click(function(){
   $(this).hide(2000,function(){
  $(this).remove()
   })
  }) 


.show()
Passende Elemente anzeigen.
 .show()
 Diese Methode akzeptiert keine Parameter.
 .show([duration][,complete])
 duration
 Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
.show([duration][,easing][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 easing
 Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$("button").click(function () {
$("div").first().show("fast", function showNext() {
  $ (this).next("div").show("fast", showNext);

  } );



.toggle()

Übereinstimmende Elemente anzeigen oder ausblenden.

 .toggle()
 Diese Methode akzeptiert keine Parameter.
.toggle([duration][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Abgeschlossen
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
.toggle([duration][,easing][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 easing
 Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$("button").click(function () {
button").click(function () {
   $("p").toggle("slow") ;
  });

.animate()

 Gemäß einer Reihe von CSS-Eigenschaften, die benutzerdefinierte Animationen ausführen.
 .animate(PROperties[,duration][,easing][,complete])
 properties

  Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend diesem Satz von Objekten.

Dauer (Standard: 400)
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 easing(default swing)
  Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion überbeansprucht wird.
Abgeschlossen
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
 .animate(properties,options)
 properties
   Ein Objekt mit CSS-Eigenschaften und -Werten. Die Animation bewegt sich entsprechend diesem Satz von Objekten.
Optionen
Eine Sammlung von Werten, die Animationsoptionen enthalten.
Verwendung:
$("#go").click(function(){
$("#block").animate({
width: "70%",
Deckkraft : 0.4,
   marginLeft: "0.6in",
  fontSize: "3em",
  borderWidth: "10px"
  }, 1500 );
 }); 🎜> $("# right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
  });
Anwenden Animation für alle Absätze, sodass ihre linke Eigenschaft 50 und ihre Transparenz 500 Millisekunden lang 1 (d. h. undurchsichtig, sichtbar) wird.
 $( "p" ).animate({
  left: 50, opacity: 1
  }, 500 );


.delay()
Legen Sie eine Verzögerung fest, um die Ausführung nachfolgender Elemente in der Warteschlange zu verzögern.
 .delay(duration[,queueName])
  duration
  Eine Ganzzahl, die die Anzahl der Millisekunden angibt, die zum Festlegen der Zeit für die Verzögerung der Ausführung der nächsten Warteschlange verwendet wird.
 queueName
  Eine Zeichenfolge, die als Warteschlangenname dient.
Wirkung:
Wir können eine Verzögerung von 800 Millisekunden zwischen den .slideUp()- und .fadeIn()-Animationen von

festlegen:
$('#foo' ). slideUp(300).delay(800).fadeIn(400);

Zwei Divs ausblenden und dann anzeigen. Es gibt eine Verzögerung von 800 Millisekunden, bevor das grüne Div angezeigt wird.
 $("button").click(function() {
    $("div.first").slideUp(300).delay(800).fadeIn(400);
  .second") .slideUp(300).fadeIn(400);
 });


.stop()
  Stoppt die aktuell laufende Animation des passenden Elements.
 .stop([clearQueue][,jumpToEnd])
 clearQueue
  Ein boolescher Wert, der angibt, ob die Warteschlangenanimation abgebrochen werden soll. Der Standardwert ist „False“. Standardwert: false;
 .stop([queue] [, clearQueue] [, jumpToEnd ] )
 queue
  Der Name der Stoppanimationswarteschlange.
  clearQueue
  Ein boolescher Wert, der angibt, ob die Animation in der Warteschlange abgebrochen werden soll. Standardmäßig falsch.
   jumpToEnd
  Ein boolescher Wert, der angibt, ob die aktuelle Animation sofort abgeschlossen wird. Standardmäßig falsch.
Verwendung:
$("#stop").click(function(){
Stoppt die Animation sofort während dieses Vorgangs.


.fadeIn()

Passende Elemente durch Einblenden anzeigen.

 .fadeIn([duration][,complete])
 duration(default: 400)
  Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
.fadeIn(options)
Eine Sammlung von Werten, die Animationsoptionen enthalten.
.fadeIn([duration][,easing][,complete])
Dauer (Standard: 400)
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Beschleunigung (Standard: Swing)
Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Vollständig
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$(".btn2").click(function(){
>.fadeOut()
Übereinstimmende Elemente durch Ausblenden ausblenden.
.fadeOut([duration][,complete])
Duration(default: 400)
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.

 complete

  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
.fadeOut(options)
Eine Sammlung von Werten, die Animationsoptionen enthalten.
.fadeOut([duration][,easing][,complete])
Dauer (Standard: 400)
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Beschleunigung (Standard: Swing)
Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Vollständig
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$(".btn2").click(function(){


.fadeTo()
Passen Sie die Transparenz übereinstimmender Elemente an.
 .fadeTo(duration,opacity[,complete])
 duration
  Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 opacity
  Eine Zahl zwischen 0 und 1, die die Opazität des Zielelements darstellt.
  complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
 .fadeTo(duration,opacity[,easing][,complete])
  duration
  Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Deckkraft
Eine Zahl zwischen 0 und 1, die die Deckkraft des Zielelements darstellt.
Beschleunigung
Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Abgeschlossen
Wenn die Animation abgeschlossen ist auszuführende Funktion.
Verwendung:
$('input').click(function(){
#div1').css("display","none");
     })
   })

.fadeToggle()
  Durch Anpassen der Deckkraftanimation des Elements, um sie anzuzeigen oder auszublenden.
 .fadeToggle([duration][,easing][,complete])
  duration(default: 400)
   Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
Beschleunigung (Standard: Swing)
Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.
Vollständig
Eine Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
 .fadeToggle(opacity)
 opacity
  Eine Sammlung von Werten, die Animationsoptionen enthalten.
Verwendung:
$("input").click(function(){
.slideDown()
Verwenden Sie eine gleitende Animation, um ein passendes Element anzuzeigen.
 .slideDown([duration][,complete])

  duration

  Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  complete
   Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
 .slideDown(opacity)
 opacity
Eine Sammlung von Werten, die Animationsoptionen enthalten.
 .slideDown([duration][,easing][,complete])
  duration
  Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
  easing
  Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion überbeansprucht wird.
  complete
   Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$("input").click(function(){
.slideUp()
Verwenden Sie eine Schiebeanimation, um ein passendes Element auszublenden.
.slideUp([duration][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.

 .slideUp(opacity)

 opacity
  Eine Sammlung von Werten, die Animationsoptionen enthalten.
.slideUp([duration][,easing][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 easing
 Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion überbeansprucht wird.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Verwendung:
$("input").click(function(){
.slideToggle()
Verwenden Sie eine Schiebeanimation, um ein passendes Element anzuzeigen oder auszublenden.
.slideToggle([duration][,complete])
Duration
Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
.slideToggle(opacity)
opacity
Eine Sammlung von Werten, die Animationsoptionen enthalten.
.slideToggle([duration][,easing][,complete])

Duration

Eine Zeichenfolge oder Zahl, die bestimmt, wie lange die Animation ausgeführt wird.
 easing
 Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion überbeansprucht wird.
 complete
  Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist.
Wirkung:
$("input").click(function(){
$('#div1').slideToggle(2000)
})

Das Obige ist der Inhalt der Verwendung des jQuery-Effekts. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!


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