پاسخ به:آموزش jquery از ابتدا
جمعه 17 آذر 1391 12:06 AM
در بین افکت ها می رسیم به افکت ظاهر شدن fade in به این کد نگاه کنید :
| example |
|---|
|
<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeIn("slow"); }); }); </script> </head> <body> <p>Demonstrate fadeIn() 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> </body> </html> |
تو این کد با کلیک روی دکمه یک مربع با یک انیمیشن ظاهر می شه
$(selector).fadeIn(speed,callback);
و کد مخفی شدن هم
$(selector).fadeOut(speed,callback);
که تو هر دو فقط برای اسپید عدد تعیین می کنیم یا از slow , fast استفاده می کنیم
و با کد زیر هم هر دو باهم
و قطعه کد زیر هم برای پنهان کردن تا یه حدیه
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
| example 2 |
|---|
|
<!DOCTYPE html> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>Demonstrate fadeToggle() with different speed parameters.</p> <button>Click to fade in/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> |
$("#div3").fadeTo("slow",0.7) ;کد
یعنی div3 رو تا میزان 0.7 ینهان کن
و مقدار 0.7 برای opacity هست که از 0 تا 1 است
