ساخت افکت fade in با ترکیب جاوا اسکریپت و css
قبل از اینکه بتوانیم افکت fade in را به بلاک div خود نسبت دهیم، باید آن را در یک تابع تعریف کنیم، برای این کار از خواص opacity در css استفاده می کنیم (opacity برای ایجاد حالت شفافیت در css3 ایجاد شده است) و آن را در یک تابع جاوا اسکریپتی تنظیم می نمائیم.
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById(code);
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setopacity(" + i + ")", i * duration);
}
}
//]]>
</script>
توضیح:
- در تابع setopacity مقادیر شفافیت را در یک ثانیه (1000 میلی ثانیه) در بیست فِرم به بلاک div نسبت می دهیم (آی دی بلاک div با عنصر document.getElementById در متغیر element تعریف شده است).
- آنگاه در یک حلقه for در تابع fadeIn، در 20 گام، افکت را تنظیم و در قسمت setTimeout از setopacity برای اعمال افکت استفاده می کنیم.
- مقادیر متفاوت style.opacity، style.mozopacity و style.khtmlopacity برای سازگاری با مرورگرهای مختلف است.
- دقت کنید که حتما این کد را در بین تگ body و بعد از بلاک div درج نمائید.
فایل ajax-loading-fade.php
فایل زیر با تابع rand در php اعدادی اتفاقی تولید و آنها را جایگزین متغیر code می کند.
<?php
$code = rand(10000,99999);
echo "کد انتخابی شما عدد ".$code." است!";
?>
این کد را با نام ajax-loading-fade.php در یک دایرکتوری ایجاد کنید.
فایل ajax-loading-fade.html
فایل زیر حاوی کد و تنظیمات آژاکسی است که درخواست را به سرور (فایل ajax-loading-fade.php) ارسال و پاسخ را دریافت می کند.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | نمایش پیام در حال پردازش و نمایش افکت در آژاکس</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
font-family:Tahoma, Geneva, sans-serif;
direction:rtl;
font-size:12px;
}
#code{
background-color:#666;
color:#FFF;
width:190px;
padding:4px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function Ajaxrequest(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
return xmlHttp;
}
catch (e){
try{
// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
}
catch (e){
alert("مرورگر شما از آژاکس پشتیبانی نمی کند!");
return false;
}
}
}
}
var div = code;
var message = message;
var loadingmessage = <img src="loading.gif" alt="loading" height="16" width="16" /> کمی صبر کنید...;
var url = ajax-loading-fade.php;
function changecode(){
var xmlHttp = Ajaxrequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState > 0 && xmlHttp.readyState < 4){
document.getElementById(message).innerHTML=loadingmessage;
}
if (xmlHttp.readyState == 4) {
document.getElementById(div).innerHTML=xmlHttp.responseText;
fadeIn()
document.getElementById(message).innerHTML=;
}
}
xmlHttp.open("POST", url, true);
xmlHttp.send();
}
//]]>
</script>
</head>
<body>
<a href="#" onclick="changecode();">تعویض کد</a><br /><br />
<div id="message"></div><br />
<div class="code" id="code">کد جدید اینجا نشان داده خواهد شد!</div>
<script type="text/javascript">
//<![CDATA[
var element = document.getElementById(code);
var duration = 1000; /* 1000 میلی ثانیه برابر با 1 ثانیه */
var steps = 20; /* میزان فِرِم های انیمیشن از حالت شفافیت کامل تا وضوح کامل */
function setopacity(level) {
element.style.opacity = level;
element.style.mozopacity = level;
element.style.khtmlopacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setopacity(" + i + ")", i * duration);
}
}
//]]>
</script>
</body>
</html>
پیش نمایش
توضیح:
- همانطور که می بینید، این کد شباهت زیادی به مثال های گذشته دارد، با این تفاوت که در اینجا یک کد جاوا اسکریپتی برای ایجاد افکت fade in به انتهای صفحه اضافه شده است.
- برای فراخوانی تابع افکت، پس از true شدن xmlHttp.readyState == 4، با قرار دادن ()fadeIn این کار را انجام داده ایم.
- برای نمایش پیام در حال پردازش و نتیجه درخواست آژاکسی، از دو بلاک متفاوت (با آی دی message و code) استفاده کرده ایم.
- عناوین بلاک ها و توابع انتخابی و سلیقه ای است، می توانید آنها را متناسب با سلیقه خود تغییر دهید.