jQuery Effects பற்றி அறிந்து கொள்ளுங்கள்

jQuery Effects பற்றி அறிந்து கொள்ளுங்கள்

jQuery என்பது JavaScript நூலகம், இது HTML ஆவணங்களில் (Documents) காட்சியளிக்கும் மற்றும் மாற்றங்களை எளிதாக செய்ய உதவுகிறது. jQuery-யின் Effects அம்சம் வலைப்பக்கங்களில் அனிமேஷன் (Animation) மற்றும் காண்பிக்கும் மாற்றங்களை (Visual Transitions) எளிமையாகச் செயல்படுத்த உதவுகிறது.

jQuery Effects என்றால் என்ன?

jQuery Effects மூலம் HTML பகுதிகளை (Elements) காட்சிப்படுத்த, மறைக்க, அல்லது நழுவுதல் (Sliding) போன்ற காட்சிமுறை மாற்றங்களைச் செய்ய முடியும். இது உபயோகபபாளர்களுக்கு எளிதில் புரியும் வடிவில் தகவல்களை காண்பிக்க உதவுகிறது.

முக்கிய jQuery Effects

Hide/Show (மறை/காட்டு)
Fade Effects
Slide Effects
Animation

1. Hide/Show (மறை/காட்டு)

hide() மற்றும் show() என்ற இரண்டு jQuery Functions களைப் பயன்படுத்தி, HTML பகுதியை (Element) மறைக்க அல்லது காட்சியளிக்க முடியும்.

hide(): பகுதியை மறைக்கிறது.
show(): பகுதியை மறைக்கப்பட்டிருந்தால், திரும்பக் காட்டுகிறது.

$(document).ready(function(){
  $("#hideBtn").click(function(){
    $("#myDiv").hide();
  });

  $("#showBtn").click(function(){
    $("#myDiv").show();
  });
});

இங்கு, #hideBtn கிளிக் செய்யும்போது #myDiv பகுதி மறையும், #showBtn கிளிக் செய்யும்போது அது மீண்டும் தோன்றும்.

2. Fade Effects

fadeIn() மற்றும் fadeOut() functions பயன்படுத்தி, ஒரு பகுதியின் காட்சியளிப்பு நிலையை மெதுவாக மறைக்கவும் (Fade out) அல்லது காட்டவும் (Fade in) முடியும்.

fadeIn(): பகுதியை மெதுவாக காட்சியளிக்கிறது.
fadeOut(): பகுதியை மெதுவாக மறைக்கிறது.

$(document).ready(function(){
  $("#fadeOutBtn").click(function(){
    $("#myDiv").fadeOut();
  });

  $("#fadeInBtn").click(function(){
    $("#myDiv").fadeIn();
  });
});

இங்கு, fadeOut() மூலம் பகுதி மெதுவாக மறைந்து காணாமல் போகும், fadeIn() மூலம் அது திரும்பத் தோன்றும்.

3. Slide Effects

slideUp() மற்றும் slideDown() functions களைப் பயன்படுத்தி, ஒரு பகுதி நழுவி மேலே (Slide up) அல்லது கீழே (Slide down) செல்லும்.

slideUp(): பகுதியை மேலே நழுவுகிறது (மறைக்கிறது).
slideDown(): பகுதியை கீழே நழுவுகிறது (காட்டுகிறது).

$(document).ready(function(){
  $("#slideUpBtn").click(function(){
    $("#myDiv").slideUp();
  });

  $("#slideDownBtn").click(function(){
    $("#myDiv").slideDown();
  });
});

இங்கு, slideUp() மூலம் பகுதி மேலே நழுவி மறையும், slideDown() மூலம் அது திரும்பக் கீழே வந்து தோன்றும்.

4. Animation

jQuery-யில் animate() function களைப் பயன்படுத்தி ஒரு பகுதியின் (Element) CSS பண்புகளை மாற்றி அனிமேஷன் உருவாக்கலாம்.

$(document).ready(function(){
  $("#animateBtn").click(function(){
    $("#myDiv").animate({
      left: '250px',
      opacity: '0.5',
      height: 'toggle'
    });
  });
});

இந்த நிரலில், #myDiv இடது பக்கத்தில் 250px நகரும், அதன் மறைநிலை (Opacity) 0.5 ஆக குறையும், மேலும் அதன் உயரம் (Height) மாறும்.

முழு நிரல் (Complete Code)

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Effects Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      // Hide and Show
      $("#hideBtn").click(function(){
        $("#myDiv").hide();
      });

      $("#showBtn").click(function(){
        $("#myDiv").show();
      });

      // Fade In and Fade Out
      $("#fadeOutBtn").click(function(){
        $("#myDiv").fadeOut();
      });

      $("#fadeInBtn").click(function(){
        $("#myDiv").fadeIn();
      });

      // Slide Up and Slide Down
      $("#slideUpBtn").click(function(){
        $("#myDiv").slideUp();
      });

      $("#slideDownBtn").click(function(){
        $("#myDiv").slideDown();
      });

      // Animate
      $("#animateBtn").click(function(){
        $("#myDiv").animate({
          left: '250px',
          opacity: '0.5',
          height: 'toggle'
        });
      });
    });
  </script>
  <style>
    #myDiv {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      position: relative;
    }
  </style>
</head>
<body>

<h1>jQuery Effects Example</h1>

<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="fadeInBtn">Fade In</button>
<button id="slideUpBtn">Slide Up</button>
<button id="slideDownBtn">Slide Down</button>
<button id="animateBtn">Animate</button>

<div id="myDiv"></div>

</body>
</html>

முடிவு

jQuery Effects ஐ பயன்படுத்தி உங்களின் வலைப்பக்கங்களில் காட்சியளிப்பு மாற்றங்களை எளிமையாக உருவாக்க முடியும். Hide/Show, Fade, Slide, மற்றும் Animate போன்ற முக்கியமான Effects-களை பயன்படுத்தி உபயோகபபாளர்களுக்கு நேரடியாக தொடர்பு கொள்ளும் காட்சிகளை எளிதாக ஏற்படுத்தலாம்.