jQuery animate easing使用方法
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数:
- properties:一组包含作为动画属性和终值的样式属性和及其值的集合
- duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
- easing(可选):要使用的过渡效果的名称,如:"linear" 或"swing"
- complete(可选):在动画完成时执行的函数
jQuery easing 使用方法
<span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://code.jquery.com/jquery-1.8.3.js"</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #ff0000;"> src</span><span style="color: #0000ff;">="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"</span><span style="color: #0000ff;">></span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span> </span></span>
引入之后,easing参数可选的值就有以下32种:
- linear
-
swing
-
easeInQuad
-
easeOutQuad
-
easeInOutQuad
-
easeInCubic
-
easeOutCubic
-
easeInOutCubic
-
easeInQuart
-
easeOutQuart
-
easeInOutQuart
-
easeInQuint
-
easeOutQuint
-
easeInOutQuint
-
easeInExpo
-
easeOutExpo
-
easeInOutExpo
-
easeInSine
-
easeOutSine
-
easeInOutSine
-
easeInCirc
-
easeOutCirc
-
easeInOutCirc
-
easeInElastic
-
easeOutElastic
-
easeInOutElastic
-
easeInBack
-
easeOutBack
-
easeInOutBack
-
easeInBounce
-
easeOutBounce
- easeInOutBounce
<span style="color: #000000;"> jQuery.extend( jQuery.easing, { easeOutExpo: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (x, t, b, c, d) { </span><span style="color: #0000ff;">return</span> (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; <span style="color: #000000;"> }, easeOutBounce: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (x, t, b, c, d) { </span><span style="color: #0000ff;">if</span> ((t/=d) )) { <span style="color: #0000ff;">return</span> c*(7.5625*t*t) +<span style="color: #000000;"> b; } </span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } <span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> (t return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } <span style="color: #0000ff;">else</span><span style="color: #000000;"> { </span><span style="color: #0000ff;">return</span> c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; <span style="color: #000000;"> } }, }); </span>
使用jQuery自定义动画函数animate来指定easing效果,如自定义一种类弹簧效果的动画:
<span style="color: #000000;"> $(myElement).animate({ top: </span>500<span style="color: #000000;">, opacity: </span>1<span style="color: #000000;"> }, </span>1000, 'easeOutBounce');
值得一提的是jQuery 1.4版本中对animate()方法,easing的方法进行了扩展,支持为每个属性指定easing方法,详细请参考这里,如:
<span style="color: #008000;">//</span><span style="color: #008000;">第一种写法</span> <span style="color: #000000;"> $(myElement).animate({ left: [</span>500, 'swing'<span style="color: #000000;">], top: [</span>200, 'easeOutBounce'<span style="color: #000000;">] }); </span><span style="color: #008000;">//</span><span style="color: #008000;">第二种写法</span> <span style="color: #000000;"> $(myElement).animate({ left: </span>500<span style="color: #000000;">, top: </span>200<span style="color: #000000;"> }, { specialEasing: { left: </span>'swing'<span style="color: #000000;">, top: </span>'easeOutBounce'<span style="color: #000000;"> } }); </span>
使用jQuery内置动画函数如slideUp()、slideDown()等来指定easing效果,以下两种方法都可以:
$(myElement).slideUp(1000<span style="color: #000000;">, method, callback}); $(myElement).slideUp({ duration: </span>1000<span style="color: #000000;">, easing: method, complete: callback }); </span>

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
