Explication détaillée de l'effet Jquery usage_jquery

jQuery est une excellente classe de bibliothèque de développement js qui est aussi bonne qu'un prototype, en particulier sa prise en charge de css et XPath, ce qui nous permet d'écrire plus facilement du js ! Si vous n'êtes pas un expert en js et que vous souhaitez écrire d'excellents effets js, jQuery peut vous aider à atteindre votre objectif !

.hide()

Masquer les éléments correspondants.

　.hide()

Cette méthode n'accepte aucun paramètre.

　.hide([durée][,complete])
　　Durée

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
Terminé

Fonction qui est exécutée lorsque l'animation est terminée.
​.hide([duration][,easing][,complete])
　　durée

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
　　assouplissement

Une chaîne indiquant quelle fonction d'assouplissement utiliser pour la transition.
Terminé

Fonction à exécuter lorsque l'animation est terminée.
Utilisation :

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

　.show()

Afficher les éléments correspondants.

　.show()

Cette méthode n'accepte aucun paramètre.
​.show([durée][,complète])
　　Durée

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
Terminé

Fonction qui est exécutée lorsque l'animation est terminée.
​.show([duration][,easing][,complete])
　　durée

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
　　assouplissement

Une chaîne indiquant quelle fonction d'assouplissement utiliser pour la transition.
Terminé

Fonction à exécuter lorsque l'animation est terminée.

Utilisation :

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

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

.toggle()

Afficher ou masquer les éléments correspondants.

　.toggle()

Cette méthode n'accepte aucun paramètre.
​.toggle([durée][,complète])
　　Durée

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
Terminé

Fonction qui est exécutée lorsque l'animation est terminée.
​.toggle([duration][,easing][,complete])
　　durée

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
　　assouplissement

Une chaîne indiquant quelle fonction d'assouplissement utiliser pour la transition.
Terminé

Fonction à exécuter lorsque l'animation est terminée.

Utilisation :

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

.animate()

Exécutez une animation personnalisée basée sur un ensemble de propriétés CSS.

　.animate(properties[,duration][,easing][,complete])
Propriétés

　　　Un objet de propriétés et de valeurs CSS, l'animation se déplacera en fonction de cet ensemble d'objets.
durée (par défaut : 400)

Une chaîne ou un nombre qui détermine la durée pendant laquelle l'animation sera exécutée.
　　assouplissement (swing par défaut)

Une chaîne indiquant quelle fonction d'assouplissement est surutilisée.
Terminé

Fonction qui est exécutée lorsque l'animation est terminée.
​​.animate(propriétés,options)
　　propriétés

Un objet de propriétés et de valeurs CSS. L'animation se déplacera en fonction de cet ensemble d'objets.
　　options

Une collection de valeurs contenant des options d'animation.

Utilisation :

$("#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");
　　　　});

Appliquez une animation à tous les paragraphes afin que leur propriété de gauche devienne 50 et que leur transparence devienne 1 (c'est-à-dire opaque, visible) pendant 500 millisecondes.

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

.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);
　　});

.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)
　　　　})

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