تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


ک

آموزش 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);

سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین