jQuery Effect - Animation

jQuery animate() na hanyar na aiki ya aminu a kai aiki hanyar aiki na gurbin na gina.

Wasa na aiki



jQuery

jQuery aiki - animate() na hanyar

jQuery animate() na amfaniya don aiki hanyar aiki na gurbin na gina.

Kauyawa:

$(selector).animate({params},speed,callback);

Dangi amma params Amfaniya na farko na kan gurbin CSS wanda a zai amfaniya wanda ke aiki.

A yawa speed Amfaniya na farko na kan waktilin na aiki. Ita za a iya yiwa: "slow", "fast" ko milisecond.

A yawa callback Amfaniya na farko na kan hanyar na aiki na yau ya kasance sunan fannin wanda a zai amfaniya bayan amfaniyar hanyar.

Dukkanin wasan kwaikwayo a hakan ya nuna amfaniyar animate() da yawa; ya kai <div> abin da ya kai ga karewa, har sai left na abin ya kai kai kai 250 pixel:

实例

$("button").click(function(){
  $("div").animate({left:'250px'});
);

亲自试一试

Tuntubarin:Dangi amma, dukkanin abin HTML suna da hanyar na statik, kuma yana kai iya sauki.

Dangi amma yana bikiwata, don aiki na hanyar, yana bikiwata raba CSS position na abin da a amfaniya shi shi a yi relative, fixed ko absolute!

jQuery animate() - aiki dukkanin gurbin

Raba: Tana aiki dukkanin gurbin a kada a amfaniya animate() yana aiki dukkanin gurbin:

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

亲自试一试

Tuntubarin:A kada za a amfaniya animate() don aiki dukkanin gurbin CSS?

Yaa, kada zai! Baka, yana bikiwata ciniki kama: Dangi amma wanda a amfaniya animate(), kada a amfaniya Camel kiwon tunanin sunan dukkanin gurbin, kamar, kada a amfaniya paddingLeft kuma yana amfaniya padding-left, kada a amfaniya marginRight kuma yana amfaniya margin-right, kuma sauri.

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

亲自试一试

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

实例

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

亲自试一试

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例 1

隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

亲自试一试

实例 2

下面的例子把 <div> 元素移动到右边，然后增加文本的字号：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

亲自试一试