jQuery ਪ੍ਰਭਾਵ
jQuery ਕੋਲ ਛੁਪਾਉਣ, ਦਿਖਾਉਣ, ਟੁਕਰਾਉਣ, ਸਲਾਨਾ ਅਤੇ ਪਰਿਵਾਰਕ ਚਿਤਰਾਂ ਆਦਿ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰਨ ਦੀ ਸਮਰੱਥਾ ਹੈ。
ਆਪਣੇ ਤੌਰ 'ਤੇ ਪ੍ਰਯੋਗ ਕਰੋ
ਇਹ jQuery ਪ੍ਰਭਾਵ ਦੱਸੋ:
CodeW3C.com - ਪ੍ਰਮੁੱਖ ਵੈਬ ਟੈਕਨੋਲੋਜੀ ਟ੍ਰੇਨਿੰਗ ਸਾਈਟ
CodeW3C.com 'ਤੇ, ਤੁਸੀਂ ਆਪਣੇ ਲਈ ਸਾਰੇ ਵੈਬਸਾਈਟ ਨਿਰਮਾਣ ਟ੍ਰੇਨਿੰਗ ਦੇ ਸਾਰੇ ਮਿਲ ਸਕਦੇ ਹੋ
ਇੱਥੇ ਕਲਿੱਕ ਕਰੋ
ਉਦਾਹਰਣ
- jQuery hide()
- ਸਾਦਾ jQuery hide() ਫੰਕਸ਼ਨ ਦਿਖਾਉਣਾ。
- jQuery hide()
- ਹੋਰ hide() ਪ੍ਰਦਰਸ਼ਨ।ਕਿਵੇਂ ਕੁਝ ਪਾਠ ਨੂੰ ਛੁਪਾਓ?
- jQuery slideToggle()
- ਸਾਦਾ slide panel ਪ੍ਰਭਾਵ ਦਿਖਾਉਣਾ。
- jQuery fadeTo()
- ਸਾਦਾ jQuery fadeTo() ਫੰਕਸ਼ਨ ਦਿਖਾਉਣਾ。
- jQuery animate()
- ਸਾਦਾ jQuery animate() ਫੰਕਸ਼ਨ ਦਿਖਾਉਣਾ。
jQuery ਛੁਪਾਉਣ ਅਤੇ ਦਿਖਾਉਣ
hide() ਅਤੇ show() ਦੋਵੇਂ ਫੰਕਸ਼ਨਾਂ ਰਾਹੀਂ jQuery ਐੱਚਟੀਐੱਮਐੱਲ ਇਲਾਕੇ ਦੀ ਛੁਪਾਉਣ ਅਤੇ ਦਿਖਾਉਣ ਦੀ ਸਮਰੱਥਾ ਰੱਖਦਾ ਹੈ:
ਉਦਾਹਰਣ
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() ਅਤੇ show() ਦੋਵੇਂ ਦੋ ਵਿਕਲਪਿਤ ਪੈਰਾਮੀਟਰ: speed ਅਤੇ callback ਨੂੰ ਸੈਟ ਕਰ ਸਕਦੇ ਹਨ。
ਵਿਧੀ:
$(selector).hide(speed,callback) $(selector).show(speed,callback)
speed ਪੈਰਾਮੀਟਰ ਪ੍ਰਦਰਸ਼ਨ ਜਾਂ ਛੁਪਾਉਣ ਦੀ ਗਤੀ ਨੂੰ ਨਿਰਧਾਰਿਤ ਕਰਦਾ ਹੈ।ਇਹ ਮੁੱਲ ਸੈਟ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ: "slow", "fast", "normal" ਜਾਂ ਮਿਲੀਸਕਵੰਡ
callback ਪੈਰਾਮੀਟਰ ਹਾਈਡ ਜਾਂ show ਫੰਕਸ਼ਨ ਮੁਕੰਮਲ ਹੋਣ ਦੇ ਬਾਅਦ ਚਲਾਏ ਜਾਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਦਾ ਨਾਮ ਹੈ।ਤੁਸੀਂ ਇਸ ਟ੍ਰੇਨਿੰਗ ਦੇ ਨਿਚੇ ਦੇ ਅਧਿਆਏ ਵਿੱਚ ਇਸ ਬਾਰੇ ਅਧਿਕ ਸਿੱਖਣਾਂ ਦੇ ਸਮਾਨ ਹੋਵੇਗਾ callback ਪੈਰਾਮੀਟਰਾਂ ਦੀ ਜਾਣਕਾਰੀ
ਉਦਾਹਰਣ
$("button").click(function(){
$("p").hide(1000);
});
jQuery ਤਬਦੀਲੀ
jQuery toggle() ਫੰਕਸ਼ਨ show() ਜਾਂ hide() ਫੰਕਸ਼ਨ ਦੀ ਮਦਦ ਨਾਲ ਐੱਚਟੀਐੱਮਐੱਲ ਇਲਾਕੇ ਦੀ ਦਿਸ਼ਾ ਦਾ ਤਬਦੀਲੀ ਕਰਦਾ ਹੈ。
ਦਿਖਾਈ ਵਾਲੇ ਇਲੈਕਟ੍ਰੌਨਿਕ ਇਲਾਕੇ ਨੂੰ ਛੁਪਾਓ, ਛੁਪੇ ਇਲਾਕੇ ਨੂੰ ਦਿਖਾਓ。
ਵਿਧੀ:
$(selector).toggle(speed,callback)
speed ਪੈਰਾਮੀਟਰ ਇਹ ਕੀਮਤਾਂ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦਾ ਹੈ: "slow", "fast", "normal" ਜਾਂ ਮਿਲੀਸਕਵਾਰਡ。
ਉਦਾਹਰਣ
$("button").click(function(){
$("p").toggle();
});
callback ਪੈਰਾਮੀਟਰ ਇਹ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਪੂਰਾ ਹੋਣ ਦੇ ਬਾਅਦ ਚਲਾਇਆ ਜਾਵੇਗਾ ਦਾ ਫੰਕਸ਼ਨ ਨਾਮ। ਤੁਸੀਂ ਇਸ ਟਿੰਨਰੀ ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਬਾਰੇ ਸਿੱਖਣਗੇ callback ਪੈਰਾਮੀਟਰਾਂ ਦੀ ਜਾਣਕਾਰੀ
jQuery ਸਕਰੋਲਿੰਗ ਫੰਕਸ਼ਨ - slideDown, slideUp, slideToggle
jQuery ਹੁੰਦਾ ਹੈ ਇਹ ਸਕਰੋਲਿੰਗ ਫੰਕਸ਼ਨਾਂ:
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed ਪੈਰਾਮੀਟਰ ਇਹ ਕੀਮਤਾਂ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦਾ ਹੈ: "slow", "fast", "normal" ਜਾਂ ਮਿਲੀਸਕਵਾਰਡ。
callback ਪੈਰਾਮੀਟਰ ਇਹ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਪੂਰਾ ਹੋਣ ਦੇ ਬਾਅਦ ਚਲਾਇਆ ਜਾਵੇਗਾ ਦਾ ਫੰਕਸ਼ਨ ਨਾਮ। ਤੁਸੀਂ ਇਸ ਟਿੰਨਰੀ ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਬਾਰੇ ਸਿੱਖਣਗੇ callback ਪੈਰਾਮੀਟਰਾਂ ਦੀ ਜਾਣਕਾਰੀ
slideDown() ਮਾਮਲਾ
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() ਮਾਮਲਾ
$(".flip").click(function(){
$(".panel").slideUp();
});
slideToggle() ਮਾਮਲਾ
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade ਫੰਕਸ਼ਨ - fadeIn(), fadeOut(), fadeTo()
jQuery ਨੂੰ ਨਿਮਨਲਿਖਤ fade ਫੰਕਸ਼ਨ ਹਨ:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed ਪੈਰਾਮੀਟਰ ਇਹ ਕੀਮਤਾਂ ਨੂੰ ਸੈਟ ਕਰ ਸਕਦਾ ਹੈ: "slow", "fast", "normal" ਜਾਂ ਮਿਲੀਸਕਵਾਰਡ。
fadeTo() ਫੰਕਸ਼ਨ ਵਿੱਚ opacity ਪੈਰਾਮੀਟਰ ਇਹ ਵਰਣਨ ਕਰਦਾ ਹੈ ਕਿ ਗੁਣਨਸ਼ੀਲਤਾ ਕਿਵੇਂ ਘਟਦੀ ਹੈ
callback ਪੈਰਾਮੀਟਰ ਇਹ ਹੈ ਕਿ ਫੰਕਸ਼ਨ ਪੂਰਾ ਹੋਣ ਦੇ ਬਾਅਦ ਚਲਾਇਆ ਜਾਵੇਗਾ ਦਾ ਫੰਕਸ਼ਨ ਨਾਮ। ਤੁਸੀਂ ਇਸ ਟਿੰਨਰੀ ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਬਾਰੇ ਸਿੱਖਣਗੇ callback ਪੈਰਾਮੀਟਰਾਂ ਦੀ ਜਾਣਕਾਰੀ
fadeTo() ਮਾਮਲਾ
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
fadeOut() ਮਾਮਲਾ
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery ਕਸਟਮ ਐਨੀਮੇਸ਼ਨ
jQuery ਫੰਕਸ਼ਨ ਕਸਟਮ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਦੀ ਗਰੁੱਪ ਸ਼ੈਕਸਪੀਅਰ ਹੈ:
$(selector).animate({params},[duration],[easing],[callback])
ਮਹੱਤਵਪੂਰਨ ਪੈਰਾਮੀਟਰ ਹੈ paramsਇਹ ਐਨੀਮੇਸ਼ਨ ਪੈਦਾ ਕਰਨ ਵਾਲੇ CSS ਪੈਰਾਮੀਟਰ ਨੂੰ ਵਰਣਨ ਕਰਦਾ ਹੈ। ਕਈ ਅਜਿਹੇ ਪੈਰਾਮੀਟਰਾਂ ਨੂੰ ਸਾਥ-ਸਾਥ ਸੈਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
ਦੂਜਾ ਪੈਰਾਮੀਟਰ ਹੈ durationਇਹ ਵਰਣਨ ਕਰਦਾ ਹੈ ਕਿ ਕਿਸ ਸਮੇਂ ਤੱਕ ਐਨੀਮੇਸ਼ਨ ਲਾਗੂ ਕੀਤੀ ਜਾਵੇ। ਇਸ ਵਿੱਚ ਸੈਟ ਕੀਤੀ ਗਈ ਕੀਮਤ ਹੈ: "slow", "fast", "normal" ਜਾਂ ਮਿਲੀਸਕਵਾਰਡ。
ਮਾਡਲ 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
ਮਾਡਲ 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML ਏਲੀਮੈਂਟ ਮੂਲਤਬੀ ਰਿਲੇਟਿਵ ਲੋਕੇਸ਼ਨ ਹਨ ਅਤੇ ਮੋਵਿੰਗ ਨਹੀਂ ਹਨ。
ਜੇਕਰ ਤੁਸੀਂ ਏਲੀਮੈਂਟ ਨੂੰ ਮੋਵਿੰਗ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਕ੍ਰਿਪਸ ਦਾ position ਰਿਲੇਟਿਵ ਜਾਂ ਅਬਸੋਲਿਊਟ ਸੈਟ ਕਰੋ。
jQuery ਇਫੈਕਟ - ਇਸ ਪੰਨੇ ਤੋਂ
| ਫੰਕਸ਼ਨ | ਵਰਣਨ |
|---|---|
| $(selector).hide() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਛੁੱਪਾਉਣਾ |
| $(selector).show() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਦਿਖਾਉਣਾ |
| $(selector).toggle() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਛੁੱਪਾਉਣ ਅਤੇ ਦਿਖਾਉਣ ਦਾ ਟੂਗਲ |
| $(selector).slideDown() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਨਿਚੋਰ ਤੋਂ ਉੱਪਰ ਕਰਨਾ (ਦਿਖਾਉਣਾ) |
| $(selector).slideUp() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਉੱਪਰ ਤੋਂ ਨਿਚੋਰ ਕਰਨਾ (ਛੁੱਪਾਉਣਾ) |
| $(selector).slideToggle() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਉੱਪਰ ਤੋਂ ਨਿਚੋਰ ਕਰਨ ਅਤੇ ਨਿਚੋਰ ਤੋਂ ਉੱਪਰ ਕਰਨ ਦਾ ਟੂਗਲ |
| $(selector).fadeIn() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਫੇਡ ਆਉਣ ਦਾ ਪ੍ਰਭਾਵ ਦੇਣਾ |
| $(selector).fadeOut() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਫੇਡ ਆਉਣ ਦਾ ਪ੍ਰਭਾਵ ਦੇਣਾ |
| $(selector).fadeTo() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਦਿੱਤੇ ਗਏ ਅਨੁਪਰਾਪਤ ਅਨੁਪਰਾਪਤੀ ਲਈ ਫੇਡ ਆਉਣ ਦਾ ਪ੍ਰਭਾਵ ਦੇਣਾ |
| $(selector).animate() | ਚੁਣੇ ਹੋਏ ਏਲੀਮੈਂਟ ਨੂੰ ਪਸੰਦੀਦਾ ਏਨੀਮੇਸ਼ਨ ਕਰੋ |
ਪੂਰੇ ਸੰਦਰਭ ਮੁੱਲ ਲਈ ਸਾਡੇ jQuery ਇਫੈਕਟ ਸੰਦਰਭ ਮੁੱਲ。
