آموزش jquery افکت‌های جی‌کوئری قسمت چهارم

آموزش افکت های پر کاربرد و محبوب jquery

افکت‌های Hide و Show :

 

به مثال زیر توجه کنید :

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(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>

اگر کد را اجرا کنید ، با کلیک روی Button Hide ، المنت p مخفی و با کلیک بر روی Button Show المنت p دوباره ظاهر می‌شود.

شما می‌توانید برای مخفی و ظاهر شدن یک المنت سرعت تعیین کنید !

$("button").click(function(){
  $("p").hide(1000);
});
با کلیک بروی Button ، المنت p در مدت زمان 1 ثانیه ( 1000 میلی ثانیه ) مخفی می‌شود. عدد درون پرانتز hide بر حسب میلی ثانیه است. ( هر ثانیه 1000 میلی ثانیه است).

افکت ()Toggle :

کد زیر را در نظر بگیرید :

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

افکت Toggle ، افکت های Hide و Show را با هم ادغام کرده. در مثال بالا با کلیک بر روی Button ، المنت p مخفی می‌شود و اگر بار دوم بر روی Button کلیک کنید ، المنت p مجددا ظاهر می‌شود.

 

افکت های دیگر جی‌کوئری :

fadeIn()
fadeOut()
fadeToggle()
fadeTo()
...

Slide های جی‌کوئری :

سه نوع اسلاید داریم :

  • slideDown()
  • slideUp()
  • slideToggle()

 

 

اسلاید ()slideDown :

المنت مورد نظر را به سمت پایین Slide می‌دهد. مثلا

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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:#e5eecc;
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 world!</div>

</body>
</html>

با کلیک بر روی div با آی‌دی flip ، المنت با آی‌دی panel ، به سمت پایین اسلاید داده می‌شود.

 

جی‌کوئری Animate :

با انیمیشن جی‌کوئری ، می‌توانیم انیمیشن دلخواه بسازیم که ساختار آن بدین شکل است :

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

مثال زیر را در نظر بگیرید :

$("button").click(function(){
   $("div").animate({left:'250px'});
 });
با کلیک بر روی Button ، المنت div به صورت انیمیشن خاصیت left برابر با 250 به خود می‌گیرد.
 
برای اینکه یک انمیشن جی‌کوئری را  Stop (متوقف) کنیم ، از متــد زیر استفاده می‌کنیم :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>
با کلیک بر روی Div انیمیشن اجرا شده و با کلیک بر روی Button ، همان انیمیشن متوفق می‌شود.
 
در جی‌کوئری شما می‌توانید بصورت ذنجیره‌ای ، متــد ها را به بوسیله نقطه( . ) هم بچسبانید ؛ مثلا :
 $("#p1").css("color","red").slideUp(2000).slideDown(2000);

نمونه ای از آخرین کارهای ما

آموزش jquery افکت‌های جی‌کوئری قسمت چهارمReviewed by Goolexacom on Mar 23Rating: 5.0

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت