జెక్క్వీ ప్రభావాలు - ఏక్కువస్థితి ప్రభావం

jQuery animate() మాదిరిగా స్వంత అనిమేషన్ను సృష్టించవచ్చు.

ప్రభావం ప్రదర్శన



jQuery

jQuery అనిమేషన్ - animate() మాదిరిగా

jQuery animate() మాదిరిగా పరిశీలించడానికి ఉపయోగించబడుతుంది.

విధానం:

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

అవసరమైన params పరామీతి అనేది అనిమేషన్ సృష్టించే సిఎస్ఎస్ అంశాలను నిర్వచిస్తుంది.

ఆప్షణకరమైన speed పరామీతి అనేది ప్రభావం సమయాన్ని నిర్ణయిస్తుంది. ఇది ఈ విలువలను తీసుకునవచ్చు: "slow", "fast" లేదా మిల్లీసెకన్లు.

ఆప్షణకరమైన callback పరామీతి అనేది అనిమేషన్ పూర్తి అయిన తర్వాత అమలు చేయాల్సిన ఫంక్షన్ పేరు.

ఈ ఉదాహరణలో, animate() మాదిరిగా సాధారణ ఉపయోగం ప్రదర్శించబడింది; ఇది <div> అంశాన్ని ఎడమకు జరిపి, left అంశం 250 పిక్సెల్స్ వరకు చేరుస్తుంది:

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

సూచన:అప్రమేయంగా, అన్ని HTML అంశాలకు ఒక స్థిరమైన స్థానం ఉంటుంది మరియు చేరుకోలేదు.

స్థానాన్ని నియంత్రించడానికి, ముందుగా మెటా అంశాన్ని relative, fixed లేదా absolute గా సెట్ చేయాలి!

jQuery animate() - అనేక అంశాలను నియంత్రించండి

గమనించండి, అనిమేషన్ సృష్టించే ప్రక్రియలో అనేక అంశాలను ఉపయోగించవచ్చు:

ఉదాహరణ

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

స్వయంగా ప్రయత్నించండి

సూచన:animate() మాదిరిగా అన్ని CSS అంశాలను నియంత్రించవచ్చు అని?

అయ్యో, దాదాపు అన్నిటినీ! అయితే, గమనించాల్సిన ఒక ముఖ్యమైన విషయం: animate() ఉపయోగించినప్పుడు, అన్ని అంశాల పేర్లను Camel లేఖాశైలిలో వ్రాయాలి, ఉదాహరణకు, padding-left కిందట paddingLeft ఉపయోగించాలి, margin-right కిందట marginRight ఉపయోగించాలి మొదలెడి.

同时，色彩动画并不包含在核心 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 అనిమేషన్స్ కు క్వీర్ ఫంక్షన్ సమర్పిస్తుంది.

ఇది అంటే, మీరు క్రమంగా బహుళ అనిమేషన్ కాల్స్ రావాలి ఉంటే, jQuery ఈ కాల్స్లను కలిపిన 'అంతర్గత' క్వీర్ సమిట్లను సృష్టిస్తుంది. ఆపై ఈ అనిమేషన్ కాల్స్లను క్రమంగా అమలు చేస్తుంది.

ఉదాహరణ 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");
);

స్వయంగా ప్రయత్నించండి