.animate()

Categories: Effects > Custom

.animate( properties, [ duration ], [ easing ], [ callback ] ) 返回： jQuery

描述： 執(zhí)行一個(gè)CSS屬性設(shè)置的自定義動(dòng)畫。

version added: 1.0.animate( properties, [ duration ], [ easing ], [ callback ] )

properties一組CSS屬性，動(dòng)畫將朝著這組屬性移動(dòng)。

duration一個(gè)字符串或者數(shù)字決定動(dòng)畫將運(yùn)行多久。

easing要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing"。

callback在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。
version added: 1.0.animate( properties, options )

properties一組CSS屬性，動(dòng)畫將朝著這組屬性移動(dòng)。

options一組包含動(dòng)畫選項(xiàng)的值的集合。支持的選項(xiàng):
- duration: (默認(rèn)值: "normal") 三種預(yù)定速度之一的字符串("slow", "normal", or "fast")或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如：1000)
- easing:(默認(rèn)值: "swing") 要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing"。
- complete: 在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)。
- step: 每步動(dòng)畫執(zhí)行后調(diào)用的函數(shù)。
- queue: (默認(rèn)值: true) 設(shè)定為false將使此動(dòng)畫不進(jìn)入動(dòng)畫隊(duì)列
- specialEasing:一組一個(gè)或多個(gè)通過相應(yīng)的參數(shù)和相對(duì)簡(jiǎn)單函數(shù)定義的CSS屬性 ( 1.4 新增).

.animate()方法允許我們?cè)谌我獾臄?shù)值的CSS屬性上創(chuàng)建動(dòng)畫。唯一必要的屬性就是一組CSS屬性。這組屬性類似用于設(shè)置.css()方法那一個(gè)，除了屬性范圍做了更多限制。

所有用于動(dòng)畫的屬性必須是數(shù)字的（除了如下所示）；這些屬性如果不是數(shù)字的將不能使用基本的jQuery功能。（舉個(gè)例子，width, height或者left可以執(zhí)行動(dòng)畫，但是background-color不能。）屬性值被當(dāng)作一個(gè)像素單位的數(shù)字,除非另有說明。單位em 和 %需要指定使用。

除了定義數(shù)值，每個(gè)屬性能使用'show', 'hide', 和 'toggle'。這些快捷方式允許定制隱藏和顯示動(dòng)畫用來考慮顯示類型的元素。

動(dòng)畫屬性也可以是相對(duì)的。如果一個(gè)值以+= 或 -=開頭提供，那么目標(biāo)值就是以這個(gè)屬性的當(dāng)前值加上或者減去給定的數(shù)字來計(jì)算的。

Duration

持續(xù)時(shí)間是以毫秒為單位的；更高的值表示更慢的動(dòng)畫，不是更快的。'fast' 和 'slow'字符串被支持，分別表示持續(xù)時(shí)間為200 和 600毫秒。

Callback Function

如果提供回調(diào)函數(shù)，這個(gè)回調(diào)函數(shù)將在動(dòng)畫完成后被執(zhí)行一次。這個(gè)能用來將不同的動(dòng)畫串聯(lián)起來組成一個(gè)事件序列。這個(gè)回調(diào)函數(shù)不設(shè)置任何參數(shù)，但是this是存在動(dòng)畫的DOM元素，如果多個(gè)元素一起做動(dòng)畫效果，值得注意的是這個(gè)回調(diào)函數(shù)在每個(gè)匹配元素上執(zhí)行一次，不是這個(gè)動(dòng)畫作為一個(gè)整體。

我們可以為任何元素做動(dòng)畫，比如這樣的一個(gè)簡(jiǎn)單圖片：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" 
  style="position: relative; left: 10px;" />

我們可以在透明度，左邊位置，圖片高度上同時(shí)做動(dòng)畫：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

注意我們這里給定了toggle作為height屬性的目標(biāo)值。由于這個(gè)圖片開始是可見的，這個(gè)動(dòng)畫將收縮高度至0隱藏這個(gè)圖片。第二次點(diǎn)擊的時(shí)候?qū)⑾喾吹霓D(zhuǎn)變：

這個(gè)圖片的opacity已經(jīng)是其目標(biāo)值了，所以這個(gè)屬性在第二次點(diǎn)擊的時(shí)候不會(huì)有動(dòng)畫效果。由于我們給定了left目標(biāo)值作為相對(duì)值，在第二次動(dòng)畫中圖片將向右移動(dòng)得更遠(yuǎn)。

在這個(gè)例子中，如果我們希望在left屬性上做動(dòng)畫，那么這個(gè)元素的position屬性必須不是static。

jQuery UI項(xiàng)目擴(kuò)展了.animate()方法，允許一些非數(shù)值的樣式比如顏色做動(dòng)畫。該項(xiàng)目還包括來指定動(dòng)畫通過CSS classes的機(jī)制而不是單獨(dú)的屬性（The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes）。

Easing

.animate()的剩下的參數(shù)是一個(gè)字符串命名的使用緩沖函數(shù)。一個(gè)緩沖函數(shù)指定用于動(dòng)畫進(jìn)行中在不同點(diǎn)位的速度。只有easing 在jQuery庫中是默認(rèn)的，called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Per-property Easing

在jQuery 1.4 版本中，我們能設(shè)置per-property 緩存函數(shù)訪問一個(gè)單獨(dú)的.animate()。在.animate()的第一個(gè)版本中，每個(gè)屬性能獲取一個(gè)數(shù)組作為他的值：數(shù)組的第一個(gè)成員是CSS屬性和第二成員緩沖函數(shù)。如果per-property 緩存函數(shù)沒有定義一個(gè)特殊的屬性，它就使用.animate() 方法的easing屬性的這個(gè)值。如果easing屬性不是默認(rèn)的，這個(gè)函數(shù)就會(huì)默認(rèn)使用swing。

我們可以同時(shí)的使用swing緩沖函數(shù)來做width 和 height動(dòng)畫，并且用linear緩沖函數(shù)來做opacity動(dòng)畫：

$('#clickme').click(function() {
  $('#book').animate({
    width: ['toggle', 'swing'],
    height: ['toggle', 'swing'],
    opacity: 'toggle'
  }, 5000, 'linear', function() {
      $(this).after('<div>Animation complete.</div>');
  });
});

在.animate()的第二個(gè)不版本中，選項(xiàng)對(duì)象能包含specialEasing屬性，那個(gè)屬性本身是一組CSS屬性與相應(yīng)的緩沖函數(shù)。>我們可以同時(shí)的使用linear緩沖函數(shù)來做width動(dòng)畫，并且用easeOutBounce緩沖函數(shù)來做height動(dòng)畫。

$('#clickme').click(function() {
  $('#book').animate({
    width: 'toggle',
    height: 'toggle'
  }, {
    duration: 5000, 
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    }, 
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });
});

如前所述,easeOutBounce 函數(shù)是一個(gè)極其必要的插件。

注意:

所有的jQuery效果，包括.animate(),能使用jQuery.fx.off = true關(guān)閉全局性。更多信息請(qǐng)查看jQuery.fx.off.

例子：

Example: Click the button to animate the div with a number of different properties.

<!DOCTYPE html>
<html>
<head>
  <style>
div { 
background-color:#bca; 
width:100px; 
border:1px solid green;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>

/* Using multiple unit types within one animation. */

$("#go").click(function(){
  $("#block").animate({ 
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em", 
    borderWidth: "10px"
  }, 1500 );
});
</script>

</body>
</html>

Demo:

Example: Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.

<!DOCTYPE html>
<html>
<head>
  <style>
div { 
position:absolute; 
background-color:#abc; 
left:50px;
width:90px; 
height:90px;
margin:5px; 
}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$("p").animate({
  "height": "toggle", "opacity": "toggle"

}, "slow");

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

$("p").animate({
  "left": "50", "opacity": 1
}, 500);

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

$("p").animate({
  "opacity": "show"

}, "slow", "easein");

Example: The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

<!DOCTYPE html>
<html>
<head>
  <style>div { 
  background-color:#bca; 
  width:200px;
  height:1.1em;
  text-align:center;
  border:2px solid green;
  margin:3px;
  font-size:14px;
}
button {
  font-size:14px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>

<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
<script>

$("#go1").click(function(){
  $("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } )
     .animate( { fontSize:"24px" }, 1500 )
     .animate( { borderRightWidth:"15px" }, 1500);
});

$("#go2").click(function(){
  $("#block2").animate( { width:"90%"}, 1000 )
     .animate( { fontSize:"24px" } , 1000 )
     .animate( { borderLeftWidth:"15px" }, 1000);
});

$("#go3").click(function(){
  $("#go1").add("#go2").click();
});

$("#go4").click(function(){
  $("div").css({width:"", fontSize:"", borderWidth:""});
});

</script>

</body>
</html>

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

$("p").animate({
"height": "toggle", "opacity": "toggle"

}, { duration: "slow" });

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.

$("p").animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

$("p").animate({
"opacity": "show"

}, { "duration": "slow", "easing": "easein" });

Example: An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.

$("p").animate({
height:200, width:400, opacity: .5
}, 1000, "linear", function(){alert("all done");} );

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

.animate()

.animate( properties, [ duration ], [ easing ], [ callback ] ) 返回： jQuery

version added: 1.0.animate( properties, [ duration ], [ easing ], [ callback ] )

version added: 1.0.animate( properties, options )

Duration

Callback Function

Easing

Per-property Easing

注意:

例子：

Example: Click the button to animate the div with a number of different properties.

Demo:

Example: Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

Example: An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.