Wednesday, December 4, 2019

ஜெகொரி எஃபெக்ட்ஸ்



ஜெகொரி என்பது ஜாவாஸ்கிரிப்ட் லைப்ரரி ஆகும். இது விரைவானது, சிறியது, மற்றும் வெவ்வேறு பிளாட்ஃபார்மிற்க்கு இடையே செயல்பட வல்லது..கிளையண்ட் சைட் ஸ்கிரிப்ட்ங்கை எளிதாக்குகின்றது. Html டாக்குமெண்ட் டிராவர்சல் அண்ட் மேனிபுலேசன், அனிமேசன்,ஈவண்ட் ஹாண்ட்லிங், மற்றும் அஜாக்ஸ் ஆகியவற்றை செயல்படுத்துகின்றது.
ஒரு வெப் பக்கத்தை மேலும் இன்டெர் ஆக்டிவ் ஆக மற்றும் கவரத்தக்க அமைப்பதற்கு  ஜெகொரி பயன் படுகின்றது.
இது வெவ்வேறு  வகையான பிரவுசர்களில் செயல்பட வைக்கின்றது. குறைவாக கோட் எழுதுதல், நிரைய செய்தல்  என்பதை கடைப்ப்பிடிக்கின்றது

·         Jquery எஃபெக்ட்ஸ்

·          

·          ஜெகொரி ஆனது வெப் பக்கங்களுக்கு எஃபெக்ட்ஸ் கொடுக்க பயன்படுகின்றதுஇவை ஃபேடிங்க், ஸ்லைடிங்க், ஹைடிங்க், ஸோவிங்க் ஆகியவை ஆகும் fading, sliding,  
jQuery hide()
இந்த மெத்தட் ஆனது செலெக்ட் செய்யப்பட்ட எலிமெனடை ஹைட் செய்கின்றது.
 Syntax:
1.    $(selector).hide();  
சான்று நிரல்
<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#hide").click(function(){  
        $("p").hide();  
    });  
});  
</script>  
</head>  
<body>  
<p>  
<b>This is a little poem: </b><br/>  
Twinkle, twinkle, little star<br/>  
How I wonder what you are<br/>  
Up above the world so high<br/>  
Like a diamond in the sky<br/>  
Twinkle, twinkle little star<br/>  
How I wonder what you are  
</p>  
<button id="hide">Hide</button>  
</body>  
</html>  
Output:
This is a little poem:
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are
jQuery show()
. இது செலெட் செய்யப்பட்ட எலிமெண்டை காண்பிக்கின்றது
Syntax:
$(selector).show();  
சான்று நிரல்.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
        $("#hide").click(function(){  
        $("p").hide();  
    });  
    $("#show").click(function(){  
        $("p").show();  
    });  
});  
</script>  
</head>  
<body>  
<p>  
<b>This is a little poem: </b><br/>  
Twinkle, twinkle, little star<br/>  
How I wonder what you are<br/>  
Up above the world so high<br/>  
Like a diamond in the sky<br/>  
Twinkle, twinkle little star<br/>  
How I wonder what you are  
</p>  
<button id="hide">Hide</button>  
<button id="show">Show</button>  
</body>  
</html>  
Output:
This is a little poem:
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are
jQuery show() effect with speed parameter
ஜெகொரி show எஃபெக்ட் ஸ்பீட் பாராமீட்டருடன்.
இது எவ்வளவு விரைவாக  எலிமெண்ட் ஆனது show/hide பண்ணப்பட வேண்டும் என்பதை குறிப்பிடப்பயன்படுகின்றது.
சான்று:

$(document).ready(function(){  
        $("#hide").click(function(){  
        $("p").hide(1000);  
    });  
    $("#show").click(function(){  
        $("p").show(1500);  
    });  
});  
jQuery toggle()
டாக்கிள் ஆனது காண்பிக்கப்பட்டிருந்தால் மறைப்பதற்கும் , மறைக்கப்பட்டிருந்தால் காண்பிப்பதற்கும் என மாறி மாறி செயல்படுகின்றது.
Syntax:
$(selector).toggle();  
சான்று நிரல்.

<!DOCTYPE html>    
<html>    
<head>    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
    $("button").click(function(){    
        $("div.d1").toggle();    
    });    
});    
</script>    
</head>    
<body>    
<button>Toggle</button>    
<div class="d1" style="border:1px solid black;padding:10px;width:250px">    
<p><b>This is a little poem: </b><br/>      
Twinkle, twinkle, little star<br/>      
How I wonder what you are<br/>      
Up above the world so high<br/>      
Like a diamond in the sky<br/>      
Twinkle, twinkle little star<br/>      
How I wonder what you are</p>     
</div>    
</body>    
</html>    
Output:
This is a little poem:
Twinkle, twinkle, little star
How I wonder what you are
Up above the world so high
Like a diamond in the sky
Twinkle, twinkle little star
How I wonder what you are
jQuery toggle() effect ஸ்பீட் பாராமீட்டருடன்.
இது டாக்கிள் ஆனது எவ்வளவு விரைவாக செயல்படுத்த வேண்டும் என்பதை குறிக்கின்றது.
$(document).ready(function(){  
     $("button").click(function(){  
        $("div.d1").toggle(1500);  
    });  
});  
jQuery fadeIn()
ஜெகொரி fadeIn() மெத்தட் ஆனது எலிமெண்டை fade செய்யபயன்படுகின்றது.
Syntax:
$(selector).fadein();  
jQuery fadeIn() effect சான்று நிரல்
<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeIn();  
        $("#div2").fadeIn("slow");  
        $("#div3").fadeIn(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeIn() method example with different parameters.</p>  
<button>Click to fade in boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>  
</body>  
</html>   
Output:
See the fadeIn() method example with different parameters.
jQuery fadeOut()
இது எலிமெண்டை ஃபேட் அவுட் செய்ய பயன்படுகின்றது.
சிண்டாக்ஸ்
$(selector).fadeOut();  
சான்று நிரல்.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeOut();  
        $("#div2").fadeOut("slow");  
        $("#div3").fadeOut(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeOut() method example with different parameters.</p>  
<button>Click to fade out boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>   
See the fadeOut() method example with different parameters.
jQuery fadeToggle()
ஜெகொரி ஃபேட் டாக்கிள் மெத்தட் ஆனது ஃபேட் இன் மற்றும் ஃபேட் அவுட் ஆகியவற்றிற்கிடையே மாறிமாறி செயல்பட வைக்கின்றது.
சிண்டாக்ஸ்
$(selector).fadeToggle();  
சான்று நிரல்.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeToggle();  
        $("#div2").fadeToggle("slow");  
        $("#div3").fadeToggle(3000);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeToggle() method example with different parameters.</p>  
<button>Click to fade Toggle boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>  
jQuery fadeTo()
இது எலிமெண்டை குறிப்பிட்ட ஒபாசிட்டிக்கு ஃபேட் இன் செய்யப்பயன்படுகின்றது
சிண்டாக்ஸ்
$(selector).fadeTo(speed, opacity);  
speed: இது வேகத்தை குறிக்கின்றது
opacity:இது ஒபாசிட்டியை குறிக்கின்றது
சான்று நிரல்
<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("#div1").fadeTo("slow", 0.3);  
        $("#div2").fadeTo("slow", 0.4);  
        $("#div3").fadeTo("slow", 0.5);  
    });  
});  
</script>  
</head>  
<body>  
<p>See the fadeTo() method example with different parameters.</p>  
<button>Click to fade boxes</button><br><br>  
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>  
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>  
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>  
</body>  
</html>  
jQuery slideDown()
ஜெகொரி ஸ்லைட்டவுன் ஆனது ஒரு எலிமெண்டை ஸ்லைட் டவுன் செய்யப்பயன்படுகின்றது
சிண்டாக்ஸ்
$(selector).slideDown(speed);  
speed:
இது வேகத்தை குறிக்கின்றது..
<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideDown("slow");  
    });  
});  
</script>  
 <style>   
#panel, #flip {  
    padding: 5px;  
    text-align: center;  
    background-color: #00FFFF;  
    border: solid 1px #c3c3c3;  
}  
#panel {  
    padding: 50px;  
    display: none;  
}  
</style>  
</head>  
<body>  
<div id="flip">Click to slide down panel</div>  
<div id="panel">Hello javatpoint.com!   
It is the best tutorial website to learn jQuery and other languages.</div>  
</body>  
</html>  
jQuery slideUp()
jQuery ஸ்லைட் அப் மெத்தட் ஆனது ஒரு எலிமெண்டை ஸ்லைட் அப் செய்யப்பயன்படுகின்றது.
சிண்டாக்ஸ்
$(selector).slideUp(speed);  
Speedஇது வேகத்தை குறிக்கின்றது.
சான்று நிரல்.
.
<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideUp("slow");  
    });  
});  
</script>  
 <style>   
#panel, #flip {  
    padding: 5px;  
    text-align: center;  
    background-color: #00FFFF;  
    border: solid 1px #c3c3c3;  
}  
#panel {  
    padding: 50px;  
}  
</style>  
</head>  
<body>  
<div id="flip">Click to slide up panel</div>  
<div id="panel">Hello javatpoint.com!   
It is the best tutorial website to learn jQuery and other languages.</div>  
</body>  
</html>  
jQuery slideToggle()
இந்த மெத்தட் ஆனது ஸ்லைட் அப் . மற்றும் ஸ்லைட் டவுன் ஆகியவற்றிற்கிடையே மாறி மாறி பயன்படுகின்றது
சிண்டாக்ஸ்
$(selector).slideToggle(speed);  
speed:
இது வேகத்தைக் குறிக்கின்றது
 சான்று நிரல்.
<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideToggle("slow");  
    });  
});  
</script>  
 <style>   
#panel, #flip {  
    padding: 5px;  
    text-align: center;  
    background-color: #00FFFF;  
    border: solid 1px #c3c3c3;  
}  
#panel {  
    padding: 50px;  
    display:none;  
}  
</style>  
</head>  
<body>  
<div id="flip">Click to slide toggle panel</div>  
<div id="panel">Hello javatpoint.com!   
It is the best tutorial website to learn jQuery and other languages.</div>  
</body>  
</html>
jQuery animate()
அனிமேட் மெத்தட் ஆனது எலிமெண்டுகளுக்கு அனிமேசன் செய்ய பயன்படுகின்றது.
சிண்டாக்ஸ்
$(selector).animate({params}, speed, callback);  
 Params ஆனது சிஎஸ்எஸ் பண்புகளைக் குறிக்கின்றது.
Speed ஆனது வேகத்தைக் குறிக்கின்றது
Callback என்பது ஆப்சனல் . அனிமேசனுக்கு பின் அழைக்கப்பட வேண்டிய மெத்தடை குறிக்கின்றது.
 சான்று நிரல்.

1.      <!DOCTYPE html>  
2.      <html>  
3.      <head>  
4.      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
5.      <script>   
6.      $(document).ready(function(){  
7.          $("button").click(function(){  
8.              $("div").animate({left: '450px'});  
9.          });  
10.  });  
11.  </script>   
12.  </head>  
13.  <body>  
14.  <button>Start Animation</button>  
15.  <p>A simple animation example:</p>  
16.  <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>  
17.  </body>  

ஜெகொரி அனிமேட் மெத்தட் ஒன்றுக்கு மேற்பட்ட பண்புகளுடன்.
ஓரே நேரத்தில் ஒன்றுக்கும் மேற்பட்ட பண்புகளை குறிப்பிட்டு அனிமேட் செய்யலாம்.
சான்று நிரல்.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("button").click(function(){  
        $("div").animate({  
            left: '250px',  
            opacity: '0.5',  
            height: '150px',  
            width: '150px'  
        });  
    });  
});  
</script>   
</head>  
<body>  
<button>Start Animation</button>  
<div style="background:#125f21;height:100px;width:100px;position:absolute;"></div>  
</body>  
</html>  
ஜெகொரி அனிமேட் மெத்தட் ரிலேட்டிவ் மதிப்புகளுடன்
சான்று நிரல்.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("button").click(function(){  
        $("div").animate({  
            left: '250px',  
            height: '+=150px',  
            width: '+=150px'  
        });  
    });  
});  
</script>   
</head>  
<body>  
<button>Start Animation</button>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>  
</body>  
</html>   
ஜெகொரி மெத்தட் ப்ரிடிஃபைண்ட் மதிப்புடன்.
அனிமேசன் மதிப்பை ஸோ, ஹைட், டாக்கிள் என அமைக்கலாம்.

சான்று நிரல்.

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("button").click(function(){  
        $("div").animate({  
            height: 'toggle'  
        });  
    });  
});  
</script>   
</head>  
<body>  
<button>Start Animation</button>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>  
</body>  

</html>  
ஜெகொரி கலர் அனிமேசன்.
ஓரு எளிமெண்டின் நிறத்தை மாற்றியமைக்கலாம்.

<!doctype html>  
<html lang="en">  
<head>  
  <meta charset="utf-8">  
  <title>jQuery UI Effects - Animate demo</title>  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  <style>  
    .toggler { width: 500px; height: 200px; position: relative; }  
    #button { padding: .5em 1em; text-decoration: none; }  
    #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }  
    #effect h3 { margin: 0; padding: 0.4em; text-align: center; }  
  </style>  
  <script>  
  $(function() {  
    var state = true;  
    $( "#button" ).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">Animate</h3>  
    <p>Javatpoint.com is the best tutorial website to learn Java and other programming languages.</p>  
  </div>  
</div>  
 <button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>  
</body>  
</html>  
jQuery delay()
இந்த மெத்தட் ஆனது கியூவில் இருக்கும் ஃபங்க்சன்களை தாமத்திக்க வைக்கின்றது.ஜெகொரி  டிலே மெத்தட் ஆனது கியூவில் அடுத்து இருக்கும் எலிமெண்டை காத்திருக்க வைக்க டைமர் ஏற்படுத்துகின்றது.
சிண்டாக்ஸ்
$(selector).delay (speed, queueName)   
சான்று நிரல்
<!DOCTYPE html>    
<html>    
<head>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
  $("button").click(function(){    
    $("#div1").delay("slow").fadeIn();    
});    
});    
</script>    
</head>    
<body>    
<button>Click me</button><br>  
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>    
</body>    
</html>    

jQuery delay() சான்று வெவ்வேறு மதிப்புகளுடன்
delay() ஆனது fast, slow , millisecond value என வெவ்வேறு மதிப்புகளுடன் இருக்கலாம்.
சான்று நிரல்.
<!DOCTYPE html>    
<html>    
<head>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
  $("button").click(function(){    
    $("#div1").delay("fast").fadeIn();    
    $("#div2").delay("slow").fadeIn();    
    $("#div3").delay(1000).fadeIn();    
    $("#div4").delay(2000).fadeIn();    
    $("#div5").delay(4000).fadeIn();    
});    
});    
</script>    
</head>    
<body>    
<p>This example sets different speed values for the delay() method.</p>    
<button>Click to fade in boxes with a different delay time</button>    
<br><br>    
<div id="div1" style="width:90px;height:90px;display:none;background-color:black;"></div><br>    
<div id="div2" style="width:90px;height:90px;display:none;background-color:green;"></div><br>    
<div id="div3" style="width:90px;height:90px;display:none;background-color:blue;"></div><br>    
<div id="div4" style="width:90px;height:90px;display:none;background-color:red;"></div><br>    
<div id="div5" style="width:90px;height:90px;display:none;background-color:purple;"></div><br>    
</body>    
</html>    
நன்றி
முத்து கார்த்திகேயன்,மதுரை.










ads Udanz

No comments:

Post a Comment