← Back to jQuery Course | Chapter 4: Effects & Animations | Lesson 8 of 9

CSS3 Transitions बनाम jQuery Animations

CSS transitions अक्सर simple visual changes के लिए एक अच्छी choice हैं।

In this page:

  1. CSS Transitions
  2. jQuery Animation
  3. CSS Class Toggle
  4. सही Tool चुनना
  5. CSS और jQuery को Combine करना
Syntax
javascript 
// 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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <style>#box { width:100px; transition: width 0.5s; }</style>
    <div id="box">Box</div>
    <button id="btn">Grow</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() {
        $("#box").css("width", "300px");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

jQuery Animation

jQuery का animate() तब उपयोगी है जब खुद animation को JavaScript logic से drive करना ज़रूरी हो -- उदाहरण के लिए, runtime पर calculate की गई किसी value तक animate करना जिसके बारे में अकेले CSS को जानने का कोई तरीका नहीं है।

उदाहरण: jQuery Animation

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    #box { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
    </style>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="box" style="width:100px">Box</div>
    <button id="btn">Animate to Random Width</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() {
        const target = Math.random() * 200 + 100;
        $("#output").text("Animating to " + Math.round(target) + "px");
        $("#box").animate({width: target + "px"});
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <style>.active { background: yellow; transition: background 0.3s; }</style>
    <div id="box">Box</div>
    <button id="btn">Toggle</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() {
        $("#box").toggleClass("active");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

सही Tool चुनना

एक rule of thumb के तौर पर, जब effect simple और state-based हो तो CSS transitions इस्तेमाल करें, और जब animation JavaScript में computed values या conditions पर निर्भर हो तो jQuery के animate() की तरफ़ जाएँ।

उदाहरण: Choose the Right Tool

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    #box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <style>#box { transition: opacity 0.3s; }</style>
    <div id="box">Simple hover fade via CSS</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#box").on("mouseenter", function() {
        $(this).css("opacity", 0.5);
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

CSS और jQuery को Combine करना

responsibilities split करना common है: events detect करने और यह तय करने के लिए jQuery इस्तेमाल करें कि कब कुछ होना चाहिए, और यह तय करने के लिए CSS को छोड़ें कि असल में resulting visual transition कैसा दिखता है।

उदाहरण: Combining CSS and jQuery

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <style>.open { max-height:200px; transition: max-height 0.3s; }</style>
    <div id="panel">Menu</div>
    <button id="btn">Open</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() {
        $("#panel").toggleClass("open");
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

animate() से Custom Animations · Custom Transitions और Easing · ग्लोबल Animation सेटिंग्स · jQuery के Callback फंक्शन्स

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी simple hover या class change के लिए animate() इस्तेमाल करना जिसे एक CSS transition बिना JavaScript के ज़्यादा smoothly handle कर सकती है।
  2. किसी property पर एक CSS transition set करना और उस पर .animate() भी call करना, इसलिए दोनों चलते हैं और एक-दूसरे से लड़ते हैं।
  3. CSS transitions इस्तेमाल करना और animate जैसा एक completion callback की उम्मीद करना, जबकि आपको इसके बजाय transitionend event listen करना चाहिए।
🔒

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Global Animation Settings Next Lesson → jQuery Callback Functions

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.