English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص المقال

مثال بسيط لتحقيق تأثيرات حركة DIV باستخدام jQuery

1.toggle

تبديل إخفاء وتظهر الكائن، يمكن استخدامه بدلاً من show و hide

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#btn").click(function(){
		var msg1;
		var msg2;
		if($("#div1").css("display")=="none")
		{
			msg1="يتم العرض...";
			msg2="العرض اكتمل!";
		}
		else
		{
			msg1="يتم الإخفاء...";
			msg2="الإخفاء اكتمل!";
		}
		$("#info").html(msg1);
		$("#div1").toggle(4000,function(){
			$("#info").html(msg2);
		});
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info">1</div>
<div id="div1"></div>
</body>
</html>

2.fadeIn fadeOut

fadeIn: الدخول بالتدريج (الذي كان مخفيًا)، fadeOut: الخروج بالتدريج (الذي كان مرئيًا)

fadeOut

عندما يتم التبديل إلى الفاتح، سيتم إخفاء هذا الجزء من المساحة، وسينتقل المodule أدناه لأعلى

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#btn").click(function(){
		$("#div1").fadeOut(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

fadeIn

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#div1").css("display","none");
	$("#btn").click(function(){
		$("#div1").fadeIn(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

3.fadeTo

تبديل إلى شفافية معينة: 0 يعني شفافية كاملة، 1 يعني غير شفاف.

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#btn").click(function(){
		$("#div1").fadeTo(4000,0.1);
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

4.slideUp و slideDown

slideUp: إخفاء الكائن من الأعلى

slideDown: عرض الكائن من الأسفل (الذي كان مخفيًا)

slideUp

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#btn").click(function(){
		$("#div1").slideUp(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

slideDown

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#div1").css("display","none");
	$("#btn").click(function(){
		$("#div1").slideDown(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

5.slideToggle

التحرك لتحقيق التبديل بين إخفاء وتظهر الكائن

!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>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$("function"(){
	$("#btn").click(function(){
		$("#div1").slideToggle(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="تغيير" id="btn" />
<div id="info"></div>
<div id="div1"></div>
</body>
</html>

هذا المقال الذي يوضح كيفية تنفيذ تأثيرات تحرك DIV بسهولة باستخدام JQuery هو كل ما أود مشاركته معكم. آمل أن يكون هذا مرجعًا جيدًا وأن نحصل على دعمكم الكبير لتعليمات النفخ.

تعليمية الأساس
أنت قد تحب