Chinese front-end UI framework kit (11) Shake head animation? Is it possible to link your page elements with drugs ??

Source: Internet
Author: User

No.: kitjs officially discussed the establishment of the QQ group and QQ Group No. 88093625. You are welcome to join the discussion on front-end topics.

Demo address: http://xueduany.github.com/KitJs/KitJs/index.html#shakehead

If no shaking effect is found, remember to clear the cache, because the JS file of the kit. anim object has been updated, 3q3q

 

Today, I heard my brother in the group discuss the animation effect of shaking his head, similar to the effect of window shaking during login verification, combined with the anim class of kitjs mentioned earlier, we can easily implement similar component shaking effects.

CodeAs follows:

Function A1 (){
$ Kit. anim. Motion ({
Duration: 1000, // duration
El: "# test1 ",
FX: $ kit. anim. FX ('swing '),
From :{
'Margin-left': '50px'
},
To :{
'Margin-left': '0px'
},
Reverse: True,
Timeseg: 33, // shake frequency, Self-Tuning
Then: function (){
$ Kit. Log ('shake finished? Another shake? ')
}
});
}

A config. Reverse parameter is added to the kit. anim. Motion method to control the positive and negative values during animation.

 

 

The results are good. If you are interested, try it.

 

If you have more requirements or suggestions, add a group to discuss them. ^_^

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.