How to realize simple Animation effect with jQuery
This article mainly explains "jQuery how to achieve simple animation effects", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "jQuery how to achieve simple animation effects" bar!
JQuery implements simple animation
1. Show / hide
(1) display:
Show (speed, [callback])
Speed: the duration of the effect. Preferred values: slow, fast, milliseconds
Callback: the name of the method executed after the transition is complete
(2) hide:
Hide (speed, [callback])
(3) alternating:
Toggle (speed, [callback])
If 'show', then 'hide'
If 'hidden', it will be displayed.
Examples are as follows:
/ / build the structure to show the picture, hide the picture and show it alternately.
$('# btn_show') .bind ('click',function () {$(' # img1'). Show (3000); / / display within 3 seconds}) $('# btn_hide') .bind ('click',function () {$(' # img1'). Hide (1000)) / / hide} within 1 second) $('# btn_toggle') .bind ('click', function () {$(' # img1') .toggle (); / show or hide})
2. Shrink up / expand down
(1) contraction:
SlidUp (speed, [callback])
(2) expand:
SlidDown (speed, [callback])
(3) alternating:
SlidToggle (speed, [callback])
Examples are as follows:
$('# btn_up'). Bind ('click',function () {$(' # img2'). SlideUp (); / / expand}) $('# btn_down'). Bind ('click',function () {$(' # img2'). SlideDown () / / shrink}) $('# btn_slide') .bind ('click', function () {$(' # img2') .slideToggle (); / / shrink and expand alternately})
Output result:
3. Fade in / out
(1) fade in:
FadeIn (speed, [callback])
(2) fade out:
FadeOut (speed, [callback])
(3) fade in and out alternately:
FadeToggle (speed, [callback])
Examples are as follows:
$('# btn_fadeIn'). Bind ('click', function () {$(' # img3'). FadeIn (); / fade in}) $('# btn_fadeOut'). Bind ('click', function () {$(' # img3'). FadeOut () / / fade out}) $('# btn_fade') .bind ('click', function () {$(' # img3') .fadeToggle (2000); / / fade in and fade out alternately})
4. Custom animation
$(selector) .animate (params, [speed], [easing], [fn])
The required params parameters define the CSS property that forms the animation.
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
The optional callback parameter is the name of the function that is executed after the animation is complete.
Examples are as follows:
$(function () {$('button') .click (function () {$(' .bt'). Animate ({left:200, top:150, opacity:0.4}, 1000)}))
Output result:
Thank you for your reading, the above is the content of "how to achieve simple animation effects in jQuery". After the study of this article, I believe you have a deeper understanding of how to achieve simple animation effects in jQuery, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
