جی کوئری اثرات - موشن

jQuery animate() ਮੈਥਡ ਨੂੰ ਸਵਯੰਚਾਲਿਤ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਸ਼ਕਤੀ ਹੈ。

ਪ੍ਰਭਾਵ ਪ੍ਰਦਰਸ਼ਨ



jQuery

jQuery ਐਨੀਮੇਸ਼ਨ - animate() ਮੈਥਡ

jQuery animate() ਮੈਥਡ ਨਾਲ ਸਵਯੰਚਾਲਿਤ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਸ਼ਕਤੀ ਹੈ。

ਗਣਨਾ ਹੈ:

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

ਲਾਜ਼ਮੀ params ਪੈਰਾਮੀਟਰ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਵਾਲੇ CSS ਪੈਰਾਮੀਟਰ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ。

ਵਿਕਲਪਿਤ speed ਪੈਰਾਮੀਟਰ ਐਨੀਮੇਸ਼ਨ ਦੀ ਮਿਆਦ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ। ਇਹ ਹੇਠ ਲਿਖੇ ਮੁੱਲਾਂ ਨੂੰ ਲੈ ਸਕਦਾ ਹੈ: "slow"、"fast" ਜਾਂ ਮਿਲੀਸਕਵਾਂਡ

ਵਿਕਲਪਿਤ callback ਪੈਰਾਮੀਟਰ ਐਨੀਮੇਸ਼ਨ ਪੂਰੇ ਹੋਣ ਦੇ ਬਾਅਦ ਚਲਾਉਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਦਾ ਨਾਮ ਹੈ。

ਹੇਠ ਦਾ ਉਦਾਹਰਣ animate() ਮੈਥਡ ਦੇ ਸਰਲ ਵਰਤੋਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ; ਇਹ <div> ਐਲੀਮੈਂਟ ਨੂੰ ਸੱਜੇ ਵੱਲ ਚਲਾ ਦਿੰਦਾ ਹੈ ਅਤੇ left ਪੈਰਾਮੀਟਰ 250 ਪਿਕਸਲ ਤੱਕ ਪਹੁੰਚਣ ਤੱਕ ਚਲਦਾ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸੁਝਾਅ:ਮੂਲ ਰੂਪ ਵਿੱਚ, ਸਾਰੇ HTML ਐਲੀਮੈਂਟਾਂ ਕੋਲ ਇੱਕ ਸਟੇਟਿਕ ਸਥਾਨ ਹੁੰਦਾ ਹੈ ਅਤੇ ਉਹ ਕਿਸੇ ਤਰ੍ਹਾਂ ਵੀ ਚਲਾਉਣ ਵਾਲਾ ਨਹੀਂ ਹੁੰਦਾ ਹੈ。

ਸਥਾਨ ਨੂੰ ਚਲਾਉਣ ਦੇ ਲਈ, ਪਹਿਲਾਂ ਤੋਂ ਅਲਾਟਮੈਂਟ ਦਾ CSS position ਪੈਰਾਮੀਟਰ ਰਿਲੇਟਿਵ, ਫਿਕਸਡ ਜਾਂ ਅਬਸੋਲਿਊਟ ਸੈਟ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ!

jQuery animate() - ਕਈ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਚਲਾਉਣਾ

ਧਿਆਨ ਰੱਖੋ, ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਦੇ ਦੌਰਾਨ ਕਈ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸਾਥ-ਸਾਥ ਵਰਤ ਸਕਦੇ ਹੋ

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸੁਝਾਅ:animate() ਮੈਥਡ ਨਾਲ ਸਾਰੇ CSS ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਚਲਾਉਣ ਵਾਲਾ ਹੈ ਕੀ?

ਹਾਂ, ਕਿਤੇ ਕਰੀਬ ਹੈ! ਲੇਕਿਨ, ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਚੀਜ਼ ਯਾਦ ਰੱਖਣੀ ਹੈ: animate() ਵਰਤਣ ਦੇ ਸਮੇਂ, ਸਾਰੇ ਪੈਰਾਮੀਟਰਾਂ ਦਾ ਕੈਮਲ ਮਾਰਕਰ ਵਰਤਣਾ ਚਾਹੀਦਾ ਹੈ, ਜਿਵੇਂ, 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() - ਪ੍ਰਤੀਯੋਗਿਤਾ ਵਾਲੇ ਮੁੱਲਾਂ ਦਾ ਉਪਯੋਗ ਕਰਨਾ

ਤੁਸੀਂ ਹੁਣ ਤਕ ਦੇ ਅਨੁਭਵ ਵਿੱਚ ਵੀ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਅਨੀਮੇਸ਼ਨ ਕੀਤੇ ਹੋਣਗੇ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

jQuery animate() - ਕੁਆਇਰ ਫੰਕਸ਼ਨ ਦਾ ਉਪਯੋਗ ਕਰਨਾ

ਮੂਲ ਰੂਪ ਵਿੱਚ jQuery ਐਨੀਮੇਸ਼ਨ ਲਈ ਕੁਆਇਰ ਫੰਕਸ਼ਨ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ。

ਇਹ ਮਤਲਬ ਹੈ ਕਿ ਤੁਸੀਂ ਇੱਕ ਦੂਜੇ ਦੇ ਬਾਅਦ ਕਈ animate() ਕਾਲ ਲਿਖਦੇ ਹੋ ਤਾਂ 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");
});

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ