J Query এর টিউটোরিয়াল :: J QUERY পর্ব – ৫ ( jQuery event )

J QUERY হোম 

 

jQuery Hide and Show

J Query তে hide() ও show() মেথড ব্যবহার করে খুব সহজে কোন কিছুকে লুকান বা দেখান যেতে পারে।

যেমনঃ

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“#hide”).click(function(){

$(“p”).hide();

});

$(“#show”).click(function(){

$(“p”).show();

});

});

</script>

</head>

<body>

<p>If you click on the “Hide” button, I will disappear.</p>

<button id=”hide”>Hide</button>

<button id=”show”>Show</button>

</body>

</html>

jQuery Toggle

J Query তে toggle()মেথড ব্যবহার করে খুব সহজে hide()ও show()মেথড গুলিকে toggle করা যেতে পারে।

যেমনঃ

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(“p”).toggle();

});

});

</script>

</head>

<body>

 

<button>Toggle</button>

<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>

</body>

</html>

jQuery Slide – slideDown, slideUp, slideToggle

 

jQuery তে নিচের slide methods গুলি আছে :

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed parameter এই values গুলি: “slow”, “fast”, “normal”, or milliseconds.

callback parameter হল সেই function এর নাম যা function complete হবার পর execute হয়।

slideDown() Example

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.flip”).click(function(){

$(“.panel”).slideDown(“slow”);

});

});

</script>

<style type=”text/css”>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At E Bangali, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p>Show Panel</p>

</body>

</html>

 

 

slideUp() Example

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.flip”).click(function(){

$(“.panel”).slideUp(“slow”);

});

});

</script>

<style type=”text/css”>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

}

</style>

</head>

<body>

<div>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At E Bangali, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p>Hide Panel</p>

</body>

</html>

slideToggle() Example

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“.flip”).click(function(){

$(“.panel”).slideToggle(“slow”);

});

});

</script>

<style type=”text/css”>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<div>

<p>Because time is valuable, we deliver quick and easy learning.</p>

<p>At E Bangali, you can study everything you need to learn, in an accessible and handy format.</p>

</div>

<p>Show/Hide Panel</p>

</body>

</html>

jQuery Fade – fadeIn, fadeOut, fadeTo

jQuery তে নিচের fade methods গুলি আছে :

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

speed parameter এই values গুলি: “slow”, “fast”, “normal”, or milliseconds.

callback parameter হল সেই function এর নাম যা function complete হবার পর execute হয়।

fadeTo() Example

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(“div”).fadeTo(“slow”,0.25);

});

});

</script>

</head>

<body>

<div style=”background:yellow;width:300px;height:300px”>

<button>Click to Fade</button>

</div>

</body>

</html>

fadeOut() Example

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“div”).click(function(){

$(this).fadeOut(4000);

});

});

</script>

</head>

<body>

<div style=”background:yellow;width:200px”>CLICK ME AWAY!</div>

<p>If you click on the box above, it will be removed.</p>

</body>

</html>

jQuery Custom Animations

নিচের syntax টি  custom animations তৈরি করতে ব্যবহুত হয়ঃ

$(selector).animate({params},[duration],[easing],[callback])

এখানে paramparameter টি css প্রপার্টি বোঝায় যা animated হবে।

যেমনঃ

<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(“div”).animate({height:300},”slow”);

$(“div”).animate({width:300},”slow”);

$(“div”).animate({height:100},”slow”);

$(“div”).animate({width:100},”slow”);

});

});

</script>

</head>

<body>

<button>Start Animation</button>

<br /><br />

<div style=”background:#98bf21;height:100px;width:100px;position:relative”>

</div>

</body>

</html>

Author: Stargallery24

Leave a Reply

Your email address will not be published. Required fields are marked *