JQuery - Animation in Hindi

First Page
Next Page

वेब पेज पर कस्टम animation बनाने के लिए जेक्जरी एनीमेशन का उपयोग किया जाता है JQuery एनिमेशन फ़ंक्शन एचटीएमएल elements में हेर फेर करने और animation की कार्यक्षमता को जोड़ने के लिए बहुत powerful एपीआई है 

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

यह पैरामीटर में पैरामीटर को एनीमेट किए जाने के लिए सीएसएस के गुणों को परिभाषित करता है।

और यह प्रभाव की अवधि को specified करता है और गति पैरामीटर वैकल्पिक है इसे "धीमा", "तेज" या मिलीसेकेंड के रूप में सेट किया जा सकता है

एनीमेशन के पूरा होने के बाद वैकल्पिक कॉलबैक पैरामीटर executed करने के लिए एक फ़ंक्शन है।

Animating colors

JQuery के animate function के साथ, आप सभी प्रकार के सीएसएस गुणों को live कर सकते हैं यह प्लगइन इस सुविधा को जोड़ देगा इस plugins के साथ, आप निम्न गुणों को live कर सकते हैं

Example Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
    .toggler { width: 600px; height: 200px; position: relative; }
    #button { padding: .5em 1em; text-decoration: none; }
    #effect { width: 240px; height: 170px; padding: 0.4em; position: relative; background: #fff; }
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var state = true;
    $( "#button" ).on( "click", function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
          width: 500
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 240
        }, 1000 );
      }
      state = !state;
    });
  } );
  </script>
</head>
<body>
 
<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">jQuery Animation Effects</h3>
    <p></p>
  </div>
</div>
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
</body>
</html>

Example Result

jQuery Animation

jQuery Animation Effects

First Page
Next Page