jQuery effect usage

.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
　　 A 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 executed when the animation is completed.
Usage:
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 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 executed when the animation is completed.
Usage:
　　 $("button").click(function () {
　　("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 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 executed when the animation is completed.
Usage:
　　$("button").click(function () {
　　　$("p").toggle();
　　}); ("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 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({
　　, fontSize: "3em",
mate ({"left": "+=50px"}, "slow");
　　});
　Apply animation to all paragraphs so that their left property becomes 50 and their transparency becomes 1 (that is, opaque and visible). It takes time 500 milliseconds.
　 $( "p" ).animate({
　　 left: 50, opacity: 1
　　}, 500 );

.delay()
Set a delay to delay the execution of subsequent items in the queue.
　　.delay(duration[,queueName])
　　　duration
　　　An integer indicating the number of milliseconds used to set the time for delaying execution of the next queue.
　　queueName
　　 A string used as the queue name.
　 Effect:
　　 We can set a delay of 800 milliseconds between the .slideUp() and .fadeIn() animations of

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

　　Hide and then show two divs. There is a delay of 800 milliseconds before the green div is displayed.
　　 $("button").click(function() {
　　　　 $("div.first").slideUp(300).delay(800).fadeIn(400);
　　　　$("div.second").slideUp (300).fadeIn(400);
　});

.stop()
　 Stop the currently running animation of the matching element.
　　.stop([clearQueue][,jumpToEnd])
　　clearQueue
　　　A Boolean value indicating whether to cancel the queue animation, the default is false; Default false;
　　.stop([queue] [, clearQueue] [, jumpToEnd ] )
　　　queue
　　　 The name of the stop animation queue.
　　　clearQueue
　　　 A Boolean value indicating whether to cancel the queued animation. Default false.
　　　jumpToEnd
　　　A Boolean value indicating whether the current animation completes immediately. Default false.
Usage:
　　$("#stop").click(function(){
　　 $(".block").stop();
　　}); //When this operation is clicked, stop the animation immediately.

.fadeIn()

　 Display matching elements by fading in.
　.fadeIn([duration][,complete])
　　duration(default: 400)
　　A string or number that determines how long the animation will run.
　　complete
　　 Function executed when the animation is completed.
　　.fadeIn(options)
　　 A collection of values ​​containing animation options.
　.fadeIn([duration][,easing][,complete])
　　duration(default: 400)
　　A string or number that determines how long the animation will run.
　　easing(default: swing)
　　A string indicating which easing function to use for the transition
　　complete
　　A function to be executed when the animation is completed.
Usage:
　　 $(".btn2").click(function(){
　　　 $("p").fadeIn();
　　});

.fadeOut()

　Hide the matching element by fading out.
　.fadeOut([duration][,complete])
　　duration(default: 400)
　　A string or number that determines how long the animation will run.
　　complete
　　 Function executed when the animation is completed.
　　.fadeOut(options)
　　 A collection of values ​​containing animation options.
　.fadeOut([duration][,easing][,complete])
　　duration(default: 400)
　　A string or number that determines how long the animation will run.
　　easing(default: swing)
　　A string indicating which easing function to use for the transition
　　complete
　　A function to be executed when the animation is completed.
Usage:
$(".btn2").click(function(){

.fadeTo()
　 Adjust the transparency of matching elements.
　　.fadeTo(duration,opacity[,complete])
　　duration
　　　A string or number that determines how long the animation will run.
　　opacity
　　　A number between 0 and 1 representing the opacity of the target element
　　complete
　　A function that is executed when the animation is complete.
　　.fadeTo(duration,opacity[,easing][,complete])
　　Duration
　　　A string or number that determines how long the animation will run.
　　　opacity
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 
Usage:
display","none");
　　　　　})
　　　})


.fadeToggle()
　 Show or hide elements by matching their opacity animation.
　　.fadeToggle([duration][,easing][,complete])
　　　duration(default: 400)

　　　A string or number that determines how long the animation will run.

　　　easing(default: swing)
　　　A string indicating which easing function to use for the transition
　　complete
　　A function that is executed when the animation is completed.
　　.fadeToggle(opacity)
　　　opacity
　　　 A collection of values ​​containing animation options.
　 Usage:
　　　 $("input").click(function(){
　　　 $('#div1').fadeToggle(2000)
　　})


.slideDown()
　 Use sliding animation to display a matching element.
　　.slideDown([duration][,complete])
　　　duration

　　　A string or number that determines how long the animation will run.

　　　complete
　　　 Function executed when the animation is completed.
　　　.slideDown(opacity)
　　　　opacity
　　　　 A collection of values ​​containing animation options.
　　.slideDown([duration][,easing][,complete])
　　Duration
　　　A string or number that determines how long the animation will run.
　　　 easing
　　　 A string indicating which easing function is being overused.
　　　complete
　　　 Function executed when the animation is completed.
　 Usage:
　　　$("input").click(function(){
　　　　　$('#div1').slideDown(2000)
　　　})


.slideUp()
　 Use sliding animation to hide a matching element.
　　.slideUp([duration][,complete])
　　Duration

　　　A string or number that determines how long the animation will run.

　　complete
　　 Function executed when the animation is completed.
　　.slideUp(opacity)
　　　opacity
　　 A collection of values ​​containing animation options.
　 .slideUp([duration][,easing][,complete])
　　duration
　　A string or number that determines how long the animation will run.
　　　easing
　　　 A string indicating which easing function is being overused.
　　complete
　　 Function executed when the animation is completed.
Usage:
element.
　 .slideToggle([duration][,complete])
　　duration
　　 A string or number that determines how long the animation will run.
　　complete
　　 Function executed when the animation is completed.
　　.slideToggle(opacity)
　　　opacity
　　　 A collection of values ​​containing animation options.

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

　　duration
　　A string or number that determines how long the animation will run.
　　　easing
　　　 A string indicating which easing function is being overused.
　　complete
　　 Function executed when the animation is completed.
　Effect:
　　$("input").click(function(){
　　　$('#div1').slideToggle(2000)
　　})

The above is the content of jQuery effects. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn