In daily programming, a lot of animation effect settings are used. At this time, many methods can be used to complete. For example, source js, jQuery or plug-ins can be completed. When writing code by yourself, source js can be used. Sometimes it feels particularly cumbersome, but using jQuery will be very simple, here are some simple jQuery animation settings.
1. Hide and show
Hide: .hide()
Display: .show()
Show/hide: .toggle()
1.1, hide
$("#btn").on('click',function(){ $("#box").hide() })
1.2, display
$("#btn").on('click',function(){ $("#box").show() })
1.3, hide/show
$("#btn").on('click',function(){ $("#box").toggle() })
2. Pull up and pull down
Pull up: .slideUp()
Pull down: .slideDown()
Pull up/drop down: .slideToggle()
2.1, pull up
$("#btn").on('click',function(){ $("#box").slideUp() })
2.2, drop down
$("#btn").on('click',function(){ $("#box").slideDown() })
2.3, pull up/down
$("#btn").on('click',function(){ $("#box").slideToggle() })
3. Fade in and fade out
Fade in: .fadeIn (animation time)
Fade out: .fadeOut (animation time)
Fade in/fade out: .fadeToggle (animation time)
3.1, fade in
$("#btn").on('click',function(){ $("#box").fadeIn(1000) })
3.2, fade out
$("#btn").on('click',function(){ $("#box").fadeOut(1000) })
3.3, fade in/out
$("#btn").on('click',function(){ $("#box").fadeToggle(1000) })
Specify transparency
.fadeTo(time [milliseconds], transparency)
$("#btn").on('click',function(){ $("#box").fadeTo(1000,.5) })
Custom animation
.animate({attribute: target}, function(){execute after the target is completed})
Clear timer: .stop()[The timer needs to be cleared once after each animation ]
stop has two parameters, which are false by default
- Animation queue (first parameter):
false: no operation
true: empty - Current animation (second parameter):
false: stop immediately
true: reach the end immediately
Example: blinds
<style type="text/css"> * { margin: 0; padding: 0; } #box { border: 1px solid red; width: 602px; height: 202px; overflow: hidden; } .sbox { height: 200px; width: 150px; float: left; } </style> <body> <div id="box"> <div class="sbox" style="background: yellow;"></div> <div class="sbox" style="background: blue;"></div> <div class="sbox" style="background: orange;"></div> <div class="sbox" style="background: pink;"></div> </div> </body> <script type="text/javascript"> $(".sbox").hover(function() { $(this).stop().animate({ width: 300 }).siblings().stop().animate({ width: 100 }); },function(){ $(".sbox").stop().animate({width:150}) }) </script>
If you don’t add stop() to clear the timer, when the mouse moves more than once, it will record how many times the animation is triggered, and then execute them in sequence, so when the mouse leaves, the animation will not end after the current action ends. If the execution continues, the following results will occur:
