jQuery इफेक्ट्स का उपयोग वेब पेज पर एनिमेशन और विज़ुअल इफेक्ट्स को जोड़ने के लिए किया जाता है। यह फीचर्स आपको विभिन्न HTML तत्वों को छुपाने, दिखाने, फेड इन/आउट करने, स्लाइड करने और अन्य एनिमेशन प्रभाव जोड़ने की अनुमति देते हैं। jQuery का इफेक्ट्स मॉड्यूल आपके वेब पेज को अधिक इंटरैक्टिव और आकर्षक बनाने में मदद करता है।
इस अध्याय में, हम jQuery इफेक्ट्स की विभिन्न तकनीकों और उनके उपयोग के बारे में जानेंगे। हम निम्नलिखित महत्वपूर्ण बिंदुओं पर चर्चा करेंगे:
- बेसिक इफेक्ट्स (Basic Effects): तत्वों को छुपाने, दिखाने और टॉगल करने के लिए सरल इफेक्ट्स।
- फेड इफेक्ट्स (Fade Effects): तत्वों को धीरे-धीरे फेड इन और फेड आउट करने के लिए।
- स्लाइड इफेक्ट्स (Slide Effects): तत्वों को स्लाइड अप और स्लाइड डाउन करने के लिए।
- एनिमेशन (Animation): कस्टम एनिमेशन बनाने और विभिन्न CSS प्रॉपर्टीज़ को बदलने के लिए।
इस अध्याय के अंत तक, आप सीखेंगे कि कैसे jQuery इफेक्ट्स का उपयोग करके अपने वेब पेज को अधिक गतिशील और आकर्षक बनाया जा सकता है। आइए, jQuery इफेक्ट्स की इस यात्रा को शुरू करें और इसके शक्तिशाली फीचर्स का लाभ उठाएं।
बेसिक इफेक्ट्स (Basic Effects)
jQuery के बेसिक इफेक्ट्स का उपयोग HTML तत्वों को छुपाने, दिखाने, टॉगल करने और एनिमेट करने के लिए किया जाता है। ये इफेक्ट्स आपके वेब पेज को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल बनाने में मदद करते हैं। jQuery के बेसिक इफेक्ट्स का सिंटैक्स सरल है और इन्हें लागू करना बहुत आसान है।
1. छिपाना (Hide)
$(सेलेक्टर).hide(speed, callback);
इस मेथड का उपयोग किसी तत्व को छुपाने के लिए किया जाता है। `speed` पैरामीटर एनिमेशन की गति को नियंत्रित करता है (मिलीसेकंड में या ‘slow’/’fast’), और `callback` एक फंक्शन है जो एनिमेशन के पूरा होने पर निष्पादित होता है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Basic Effects Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#hideButton").click(function(){
$("#myParagraph").hide("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="hideButton">Hide Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (`#hideButton`) पर क्लिक करने पर पैराग्राफ (`#myParagraph`) धीरे-धीरे छुप जाएगा।
2. दिखाना (Show)
$(सेलेक्टर).show(speed, callback);
इस मेथड का उपयोग किसी छिपे हुए तत्व को दिखाने के लिए किया जाता है। `speed` और `callback` पैरामीटर hide() मेथड की तरह ही काम करते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Basic Effects Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("#myParagraph").show("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph" style="display:none;">This is a paragraph.</p>
<button id="showButton">Show Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (`#showButton`) पर क्लिक करने पर छिपा हुआ पैराग्राफ (`#myParagraph`) धीरे-धीरे दिखाई देगा।
3. टॉगल (Toggle)
$(सेलेक्टर).toggle(speed, callback);
इस मेथड का उपयोग किसी तत्व को छुपाने या दिखाने के लिए किया जाता है, यह इस बात पर निर्भर करता है कि वह तत्व वर्तमान में दिखाई दे रहा है या नहीं। `speed` और `callback` पैरामीटर hide() और show() मेथड्स की तरह ही काम करते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Basic Effects Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#toggleButton").click(function(){
$("#myParagraph").toggle("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="toggleButton">Toggle Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (`#toggleButton`) पर क्लिक करने पर पैराग्राफ (`#myParagraph`) छुप जाएगा अगर वह दिखाई दे रहा है और दिखाई देगा अगर वह छुपा हुआ है।
4. एनिमेट (Animate)
$(सेलेक्टर).animate(properties, duration, callback);
इस मेथड का उपयोग HTML तत्वों पर कस्टम एनिमेशन इफेक्ट्स लागू करने के लिए किया जाता है। `properties` पैरामीटर उन CSS प्रॉपर्टीज़ को निर्दिष्ट करता है जिन्हें एनिमेट किया जाएगा, `duration` एनिमेशन की अवधि (मिलीसेकंड में या ‘slow’/’fast’), और `callback` एनिमेशन के पूरा होने पर निष्पादित होने वाला फंक्शन है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Basic Effects Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#myDiv").animate({
left: '250px',
opacity: '0.5',
height: '+=50px',
width: '+=50px'
}, "slow");
});
});
</script>
<style>
#myDiv {
position: relative;
background-color: yellow;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="animateButton">Animate Div</button>
</body>
</html>
इस उदाहरण में, बटन (`#animateButton`) पर क्लिक करने पर `#myDiv` तत्व को एनिमेट किया जाता है, जिससे यह बाईं ओर 250 पिक्सेल स्थानांतरित हो जाता है, उसकी अपारदर्शिता 0.5 हो जाती है, और इसकी ऊँचाई और चौड़ाई 50 पिक्सेल बढ़ जाती है।
jQuery के बेसिक इफेक्ट्स का उपयोग करना बहुत ही आसान और शक्तिशाली है। ये इफेक्ट्स आपको HTML तत्वों को छुपाने, दिखाने, टॉगल करने और एनिमेट करने की अनुमति देते हैं, जिससे आपके वेब पेज को अधिक इंटरैक्टिव और उपयोगकर्ता-अनुकूल बनाया जा सकता है। अब, आप इन बेसिक इफेक्ट्स का उपयोग अपने प्रोजेक्ट्स में करके अपने वेब पेज को अधिक गतिशील बना सकते हैं।
फेड इन और फेड आउट (Fade In and Fade Out)
jQuery में फेड इफेक्ट्स का उपयोग HTML तत्वों को धीरे-धीरे छिपाने और दिखाने के लिए किया जाता है। फेड इन और फेड आउट इफेक्ट्स आपके वेब पेज को अधिक इंटरैक्टिव और आकर्षक बनाने में मदद करते हैं। ये इफेक्ट्स तब उपयोगी होते हैं जब आप चाहते हैं कि तत्व धीमी गति से दिखाई दें या गायब हो जाएं।
1. फेड इन (Fade In)
$(सेलेक्टर).fadeIn(speed, callback);
फेड इन इफेक्ट का उपयोग किसी छिपे हुए तत्व को धीरे-धीरे दिखाने के लिए किया जाता है। speed पैरामीटर एनिमेशन की गति को नियंत्रित करता है (मिलीसेकंड में या ‘slow’/’fast’), और callback एक फंक्शन है जो एनिमेशन के पूरा होने पर निष्पादित होता है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Fade In Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeInButton").click(function(){
$("#myParagraph").fadeIn("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph" style="display:none;">This is a paragraph.</p>
<button id="fadeInButton">Fade In Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (#fadeInButton) पर क्लिक करने पर पैराग्राफ (#myParagraph) धीरे-धीरे दिखाई देगा।
2. फेड आउट (Fade Out)
$(सेलेक्टर).fadeOut(speed, callback);
फेड आउट इफेक्ट का उपयोग किसी तत्व को धीरे-धीरे छिपाने के लिए किया जाता है। speed और callback पैरामीटर fadeIn() मेथड की तरह ही काम करते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Fade Out Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeOutButton").click(function(){
$("#myParagraph").fadeOut("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="fadeOutButton">Fade Out Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (#fadeOutButton) पर क्लिक करने पर पैराग्राफ (#myParagraph) धीरे-धीरे छुप जाएगा।
3. फेड टॉगल (Fade Toggle)
$(सेलेक्टर).fadeToggle(speed, callback);
फेड टॉगल इफेक्ट का उपयोग किसी तत्व को धीरे-धीरे छिपाने या दिखाने के लिए किया जाता है, यह इस बात पर निर्भर करता है कि वह तत्व वर्तमान में दिखाई दे रहा है या नहीं। speed और callback पैरामीटर fadeIn() और fadeOut() मेथड्स की तरह ही काम करते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Fade Toggle Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeToggleButton").click(function(){
$("#myParagraph").fadeToggle("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="fadeToggleButton">Fade Toggle Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (#fadeToggleButton) पर क्लिक करने पर पैराग्राफ (#myParagraph) धीरे-धीरे छुप जाएगा अगर वह दिखाई दे रहा है और दिखाई देगा अगर वह छुपा हुआ है।
4. फेड टू (Fade To)
$(सेलेक्टर).fadeTo(speed, opacity, callback);
फेड टू इफेक्ट का उपयोग किसी तत्व को एक निर्दिष्ट अपारदर्शिता (opacity) स्तर तक फेड करने के लिए किया जाता है। speed एनिमेशन की गति को नियंत्रित करता है (मिलीसेकंड में या ‘slow’/’fast’), opacity वह स्तर है जिस तक तत्व को फेड करना है (0 से 1 के बीच), और callback एनिमेशन के पूरा होने पर निष्पादित होने वाला फंक्शन है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Fade To Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeToButton").click(function(){
$("#myParagraph").fadeTo("slow", 0.5);
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="fadeToButton">Fade To 50% Opacity</button>
</body>
</html>
इस उदाहरण में, बटन (#fadeToButton) पर क्लिक करने पर पैराग्राफ (#myParagraph) की अपारदर्शिता धीरे-धीरे 0.5 हो जाएगी।
स्लाइडिंग इफेक्ट्स (Sliding Effects)
jQuery में स्लाइडिंग इफेक्ट्स का उपयोग HTML तत्वों को स्लाइड अप और स्लाइड डाउन करने के लिए किया जाता है। ये इफेक्ट्स आपके वेब पेज को अधिक इंटरैक्टिव और आकर्षक बनाने में मदद करते हैं। स्लाइडिंग इफेक्ट्स तब उपयोगी होते हैं जब आप चाहते हैं कि कोई तत्व स्लाइड करके दिखाई दे या छुप जाए।
1. स्लाइड अप (Slide Up)
$(सेलेक्टर).slideUp(speed, callback);
स्लाइड अप इफेक्ट का उपयोग किसी तत्व को ऊपर की दिशा में स्लाइड करके छुपाने के लिए किया जाता है। speed पैरामीटर एनिमेशन की गति को नियंत्रित करता है (मिलीसेकंड में या ‘slow’/’fast’), और callback एक फंक्शन है जो एनिमेशन के पूरा होने पर निष्पादित होता है।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Slide Up Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideUpButton").click(function(){
$("#myParagraph").slideUp("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="slideUpButton">Slide Up Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (#slideUpButton) पर क्लिक करने पर पैराग्राफ (#myParagraph) धीरे-धीरे ऊपर की दिशा में स्लाइड करके छुप जाएगा।
2. स्लाइड डाउन (Slide Down)
$(सेलेक्टर).slideDown(speed, callback);
स्लाइड डाउन इफेक्ट का उपयोग किसी छिपे हुए तत्व को नीचे की दिशा में स्लाइड करके दिखाने के लिए किया जाता है। speed और callback पैरामीटर slideUp() मेथड की तरह ही काम करते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Slide Down Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDownButton").click(function(){
$("#myParagraph").slideDown("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph" style="display:none;">This is a paragraph.</p>
<button id="slideDownButton">Slide Down Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (#slideDownButton) पर क्लिक करने पर छिपा हुआ पैराग्राफ (#myParagraph) धीरे-धीरे नीचे की दिशा में स्लाइड करके दिखाई देगा।
3. स्लाइड टॉगल (Slide Toggle)
$(सेलेक्टर).slideToggle(speed, callback);
स्लाइड टॉगल इफेक्ट का उपयोग किसी तत्व को स्लाइड करके छुपाने या दिखाने के लिए किया जाता है, यह इस बात पर निर्भर करता है कि वह तत्व वर्तमान में दिखाई दे रहा है या नहीं। speed और callback पैरामीटर slideUp() और slideDown() मेथड्स की तरह ही काम करते हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Slide Toggle Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#slideToggleButton").click(function(){
$("#myParagraph").slideToggle("slow");
});
});
</script>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<button id="slideToggleButton">Slide Toggle Paragraph</button>
</body>
</html>
इस उदाहरण में, बटन (#slideToggleButton) पर क्लिक करने पर पैराग्राफ (#myParagraph) धीरे-धीरे स्लाइड करेगा। यदि वह दिखाई दे रहा है तो छुप जाएगा और यदि वह छुपा हुआ है तो दिखाई देगा।
कैसे जांचें कि कोई तत्व jQuery में छिपा हुआ है? (How to Check if an Element is Hidden in jQuery?)
jQuery में यह जांचना कि कोई HTML तत्व छिपा हुआ है या नहीं, बहुत आसान है। jQuery का :hidden सेलेक्टर और is() मेथड आपको यह जानने में मदद करते हैं कि कोई तत्व छिपा हुआ है या नहीं।
सेलेक्टर का उपयोग (Using the Selector)
:hidden सेलेक्टर का उपयोग करके आप यह जांच सकते हैं कि कोई तत्व छिपा हुआ है या नहीं। यह सेलेक्टर उन तत्वों का चयन करता है जो display: none या visibility: hidden सेटिंग के साथ छिपे हुए हैं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Check if Element is Hidden Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#checkButton").click(function(){
if ($("#myElement").is(":hidden")) {
alert("The element is hidden.");
} else {
alert("The element is visible.");
}
});
});
</script>
</head>
<body>
<div id="myElement" style="display: none;">This is a hidden element.</div>
<button id="checkButton">Check if Element is Hidden</button>
</body>
</html>
इस उदाहरण में, जब बटन (#checkButton) पर क्लिक किया जाता है, तो यह चेक किया जाता है कि #myElement छिपा हुआ है या नहीं। अगर तत्व छिपा हुआ है, तो “The element is hidden.” का अलर्ट प्रदर्शित होता है, अन्यथा “The element is visible.” का अलर्ट प्रदर्शित होता है।
is() मेथड का उपयोग (Using the is() Method)
is() मेथड का उपयोग करके आप किसी तत्व पर कोई भी jQuery सेलेक्टर लागू कर सकते हैं और यह चेक कर सकते हैं कि वह सेलेक्टर उस तत्व पर लागू होता है या नहीं।
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<title>Check if Element is Hidden Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#checkButton").click(function(){
if ($("#myElement").is(":hidden")) {
alert("The element is hidden.");
} else {
alert("The element is visible.");
}
});
});
</script>
</head>
<body>
<div id="myElement" style="visibility: hidden;">This is a hidden element.</div>
<button id="checkButton">Check if Element is Hidden</button>
</body>
</html>
इस उदाहरण में, #myElement का visibility प्रॉपर्टी hidden पर सेट किया गया है। जब बटन (#checkButton) पर क्लिक किया जाता है, तो यह चेक किया जाता है कि #myElement छिपा हुआ है या नहीं। अगर तत्व छिपा हुआ है, तो “The element is hidden.” का अलर्ट प्रदर्शित होता है, अन्यथा “The element is visible.” का अलर्ट प्रदर्शित होता है।