CSS3 Transitions बनाम jQuery Animations
In this page:
// CSS does the animation
#element {
transition: property duration timing-function;
}
$("#element").toggleClass("class-name");
// jQuery does the animation
$("#element").animate({property: value}, duration);CSS Transitions
CSS transitions browser को किसी property change को declaratively animate करने देते हैं और आमतौर पर simple hover या state-based effects के लिए सबसे lightweight option हैं, क्योंकि browser का अपना rendering engine animation handle करता है।
उदाहरण: CSS Transitions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>#box { width:100px; transition: width 0.5s; }</style>
<div id="box">Box</div>
<button id="btn">Grow</button>
<script>
$("#btn").on("click", function() {
$("#box").css("width", "300px");
});
</script>
</body>
</html>jQuery Animation
jQuery का animate() तब उपयोगी है जब खुद animation को JavaScript logic से drive करना ज़रूरी हो -- उदाहरण के लिए, runtime पर calculate की गई किसी value तक animate करना जिसके बारे में अकेले CSS को जानने का कोई तरीका नहीं है।
उदाहरण: jQuery Animation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<script>
const target = Math.random() * 200 + 100;
$("#box").animate({width: target + "px"});
</script>
</body>
</html>CSS Class Toggle
एक common hybrid pattern है सिर्फ एक CSS class को on और off toggle करने के लिए jQuery इस्तेमाल करना, जबकि असली transition timing और easing एक CSS rule में define की जाती हैं -- jQuery की event handling को browser के ज़्यादा efficient transition engine के साथ combine करते हुए।
उदाहरण: CSS Class Toggle
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>.active { background: yellow; transition: background 0.3s; }</style>
<div id="box">Box</div>
<button id="btn">Toggle</button>
<script>
$("#btn").on("click", function() {
$("#box").toggleClass("active");
});
</script>
</body>
</html>सही Tool चुनना
एक rule of thumb के तौर पर, जब effect simple और state-based हो तो CSS transitions इस्तेमाल करें, और जब animation JavaScript में computed values या conditions पर निर्भर हो तो jQuery के animate() की तरफ़ जाएँ।
उदाहरण: Choose the Right Tool
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>#box { transition: opacity 0.3s; }</style>
<div id="box">Simple hover fade via CSS</div>
<script>
$("#box").on("mouseenter", function() {
$(this).css("opacity", 0.5);
});
</script>
</body>
</html>CSS और jQuery को Combine करना
responsibilities split करना common है: events detect करने और यह तय करने के लिए jQuery इस्तेमाल करें कि कब कुछ होना चाहिए, और यह तय करने के लिए CSS को छोड़ें कि असल में resulting visual transition कैसा दिखता है।
उदाहरण: Combining CSS and jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<style>.open { max-height:200px; transition: max-height 0.3s; }</style>
<div id="panel">Menu</div>
<button id="btn">Open</button>
<script>
$("#btn").on("click", function() {
$("#panel").toggleClass("open");
});
</script>
</body>
</html>- किसी simple hover या class change के लिए
animate()इस्तेमाल करना जिसे एक CSStransitionबिना JavaScript के ज़्यादा smoothly handle कर सकती है। - किसी property पर एक CSS
transitionset करना और उस पर.animate()भी call करना, इसलिए दोनों चलते हैं और एक-दूसरे से लड़ते हैं। - CSS transitions इस्तेमाल करना और animate जैसा एक completion callback की उम्मीद करना, जबकि आपको इसके बजाय
transitionendevent listen करना चाहिए।
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: