jQuery is an excellent js development library class that is as good as prototype, especially its support for css and XPath, making it more convenient for us to write js! If you are not a js expert and want to write excellent js effects, jQuery can help you achieve your goal!
.hide()
Hide matching elements.
.hide()
This method does not accept any parameters.
.hide([duration][,complete])
Duration
A string or number that determines how long the animation will run.
Complete
Function that is executed when the animation is completed.
.hide([duration][,easing][,complete])
duration
A string or number that determines how long the animation will run.
easing
A string indicating which easing function to use for the transition.
Complete
Function to be executed when the animation is completed.
Usage:
$('button').click(function(){
$('p').hide(2000)
});
$("div").click(function(){
$(this).hide(2000,function(){
$(this).remove()
})
}) .show()
Show matching elements.
.show()
This method does not accept any parameters.
.show([duration][,complete])
Duration
A string or number that determines how long the animation will run.
Complete
Function that is executed when the animation is completed.
.show([duration][,easing][,complete])
duration
A string or number that determines how long the animation will run.
easing
A string indicating which easing function to use for the transition.
Complete
Function to be executed when the animation is completed.
Usage:
$("button").click(function () {
$("p").show("slow");
});
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
.toggle()
Show or hide matching elements.
.toggle()
This method does not accept any parameters.
.toggle([duration][,complete])
Duration
A string or number that determines how long the animation will run.
Complete
Function that is executed when the animation is completed.
.toggle([duration][,easing][,complete])
duration
A string or number that determines how long the animation will run.
easing
A string indicating which easing function to use for the transition.
Complete
Function to be executed when the animation is completed.
Usage:
$("button").click(function () {
$("p").toggle();
});
$("button").click(function () {
$("p").toggle("slow");
});.animate()
Execute custom animation based on a set of css properties.
.animate(properties[,duration][,easing][,complete])
Properties
An object of css properties and values, the animation will move according to this set of objects.
duration(default: 400)
A string or number that determines how long the animation will run.
easing(default swing)
A string indicating which easing function is overused.
Complete
Function that is executed when the animation is completed.
.animate(properties,options)
properties
An object of CSS properties and values. The animation will move according to this set of objects.
options
A collection of values containing animation options.
Usage:
$("#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");
});Apply animation to all paragraphs so that their left property becomes 50 and their transparency becomes 1 (i.e., opaque, visible) for 500 milliseconds.
$( "p" ).animate({
left: 50, opacity: 1
}, 500 );.delay()
设置一个延时来推迟执行队列中后续的项。
.delay(duration[,queueName])
duration
一个整数，指示的毫秒数，用于设定下一个队列推迟执行的时间。
queueName
一个作为队列名的字符串。
效果：
我们可以在
$('#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 效果使用详解，希望大家喜欢。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
